You are viewing limited content. For full access, please sign in.

Question

Question

Left Align Label names

asked 4 hours ago

I set two sets of Fields to be inline, however when I did this, it shifted the alignment much further left than needed (see images, Department Name *, and Length of Time...)

How do I get these to line back up with the original fields?

//Department & Branch Location, inline text
#q155, #q156 {display : inline-block;} 
#q155 .cf-label {width: 150px;}
#q156 .cf-label {width: 125px;}
#q155 .cf-field {width : 250px; min-width : 100px;}
#q156 .cf-field {width : 150px; min-width : 100px;}
#q155, #q156 {padding : 0px;}
#q155 .cf-label, #q156 .cf-label {padding : 0px;}
#q155 .cf-input, #q156 .cf-input {padding : 0px;}

//Length of Time, Year & Month, inline text
#q175, #q176 {display: inline-block; }
#q175 .cf-label {width: 350px;}
#q176 label {display: none;}
#q175 .cf-field {width : 75px; min-width : 75px;}
#q176 .cf-field {width : 75px; min-width : 75px;}
#q175 {padding : 1px;} 
#q176 {padding : 0px;}
#q175 .cf-label {padding : 0px;}
#q175 .cf-input {padding : 0px;} 
#q176 .cf-input {padding : 0px;}

 

DeptLeft.png
RoleLeft.png
DeptLeft.png (13.53 KB)
RoleLeft.png (14.5 KB)
0 0

Replies

replied 2 hours ago

Hi Matthew,

The left shift appears to come from the padding overrides on the field containers and labels. Those overrides remove the spacing normally applied by the form’s theme.

Try replacing the two CSS sections with the version below. It keeps your existing label and field widths, along with the inline layout, but removes the container and label padding overrides so those elements can use the theme’s original spacing.

Make sure to replace the existing sections rather than append this code, since the old padding rules would otherwise remain active. Preview the form afterward; if either pair wraps onto another row, you may need to reduce the field widths slightly to accommodate the restored spacing.

 

/* Department & Branch Location, inline text */
#q155, #q156 {display: inline-block; vertical-align: top;}
#q155 .cf-label {width: 150px;}
#q156 .cf-label {width: 125px;}
#q155 .cf-field {width: 250px; min-width: 100px;}
#q156 .cf-field {width: 150px; min-width: 100px;}
#q155 .cf-input, #q156 .cf-input {padding: 0px;}

/* Length of Time, Year & Month, inline text */
#q175, #q176 {display: inline-block; vertical-align: top;}
#q175 .cf-label {width: 350px;}
#q176 label {display: none;}
#q175 .cf-field {width: 75px; min-width: 75px;}
#q176 .cf-field {width: 75px; min-width: 75px;}
#q175 .cf-input {padding: 0px;}
#q176 .cf-input {padding: 0px;}

Let me know if you have any questions. 

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.