2. PHPRunner Tips and Tricks
  3. New look of input field labels
This topic is locked

New look of input field labels

 		4/4/2020 10:25:06 AM
PHPRunner Tips and Tricks
Sergey Kornilov admin

How to save some screen estate positioning labels on the top of input boxes.
In Add/Edit form properties choose 'Separate labels and controls' and also 'Labels above controls'.


Here is the code that needs to be added under Editor->Custom CSS section.



input[type=text], textarea.form-control, select.form-control {

margin-top: -13px;

}
textarea.form-control {

overflow: scroll;

}
label.r-edit-label.control-label {

background: white;

padding-left: 5px;

padding-right: 5px;

margin-left: 8px;

font-size: 12px;

color: #94a4b5;

font-weight: normal;

}
R
 		RBrogen 4/26/2020

Tried this and on my PHPRunner project and it didn't appear to have any effect on the field labels.
K
 		keithh0427 4/29/2020



How to save some screen estate positioning labels on the top of input boxes.

Here is the code that needs to be added under Editor->Custom CSS section.

input[type=text] {

input[type=text], textarea.form-control, select.form-control {

margin-top: -13px;

}
textarea.form-control {

overflow: scroll;

}
label.r-edit-label.control-label {

background: white;

padding-left: 5px;

padding-right: 5px;

margin-left: 8px;

font-size: 12px;

color: #94a4b5;

font-weight: normal;

}



I tried this on v10.4 Build 34986 and this change was not evident
Sergey Kornilov admin 4/29/2020

Sorry, it was a copy/paste error, CSS code is fixed.
Also, make sure that in Add/Edit form properties you choose 'Separate labels and controls' and also 'Labels above controls'.
D
 		DealerModulesDevClub member 4/30/2020

Nice on Add and Edit.
What CSS do we need for the view page to look the same?
A
 		alghanim 8/9/2020

Thank you very nice
K
 		keithh0427 8/15/2020

I tried this in 10.4 with Date fields without time and Date fields with time. All in a simple edit box.
The edit box overlaps the text.
The spinner plugins seems to be a bot off as well.
Can these be corrected?
I have the fields set for vertical and separated the three elements.
K
 		keithh0427 8/26/2020



I tried this in 10.4 with Date fields without time and Date fields with time. All in a simple edit box.
The edit box overlaps the text.
The spinner plugins seems to be a bot off as well.
Can these be corrected?
I have the fields set for vertical and separated the three elements.


I got this to work by using the z-index as shown below:
input[type=text], textarea.form-control, select.form-control {

margin-top: -13px;

}
textarea.form-control {

overflow: scroll;

}
label.r-edit-label.control-label {

background: white;

padding-left: 5px;

padding-right: 5px;

margin-left: 8px;

font-size: 12px;

color: #53565A;

font-weight: normal;

z-index: 1000; position:relative;

}
A
 		alfonsoDevClub member 1/8/2021



I got this to work by using the z-index as shown below:
input[type=text], textarea.form-control, select.form-control {

margin-top: -13px;

}
It's ok, but imgcal icon is still in the middle: https://monosnap.com/file/AfUY240wb7m73riBuPAQla4x7X1aew

textarea.form-control {

overflow: scroll;

}
label.r-edit-label.control-label {

background: white;

padding-left: 5px;

padding-right: 5px;

margin-left: 8px;

font-size: 12px;

color: #53565A;

font-weight: normal;

z-index: 1000; position:relative;

}