CSS to line up Side by Side Fields

[Benjamin Hawcroft]

Hi !!

This is a general question. I really like the side by side field layout but have been struggling a little to find the right CSS to get two nicely lined up sets of fields.

Are there any tricks that people use to get form fields to line up nicely ?

[Alexander Bautz]

Hi,
Try adding this to the Custom CSS section in the Misc tab:

.sbs_FieldTable td.ms-formlabel{
	width:150px !important;
}
.sbs_FieldTable td.ms-formbody{
	width:350px !important;
}

This will affect all side-by-side fields. If you want to target a specific field, use the “Field CSS” tab in the backend configuration.

Alexander

[Benjamin Hawcroft]

Thanks Alexander ! I tried that but it does not seem to be getting the fields. I will play around some more but have also attached a screen shot of what I am seeing after applying that with 50px each on a new form.

Attachments:

1. 

   Capture.jpg
   

[Benjamin Hawcroft]

I think I have gotten closer :

.sbs_FieldTable{
width:300px;
}
.sbs_FieldTable td.ms-formlabel{
width:auto !important;
padding-left:10px;
}
.sbs_FieldTable td.ms-formlabel h3.ms-standardheader nobr{
whitespace:nowrap !important;
}
.sbs_FieldTable td.ms-formbody{
width:100% !important;
}
.sbs_FieldTable input{
width:100% !important;
}
.sbs_FieldTable select{
width:100% !important;
}

Except I am having trouble getting a nowrap working on the label as it seems to be overridden by a style coming from DFFS_FrontEnd.css.

Thank you for the help ! The .sbsFieldTable got me heading in the right direction.

[Benjamin Hawcroft]

Apologies. I had a typo on whitespace. Should have been white-space.

[Benjamin Hawcroft]

In case this helps someone else…

This is the styles I used to mostly line up two columns of side by side fields on a ‘new’ form. This is entered in the ‘misc’ section.

.sbs_FieldTable{
width:260px;
}
.sbs_FieldTable td.ms-formlabel{
width:auto !important;
padding-left:20px;
}
.sbs_FieldTable td.ms-formlabel h3.ms-standardheader nobr{
white-space:nowrap !important;
}
.sbs_FieldTable td.ms-formbody{
width:100% !important;
}
.sbs_FieldTable input{
width:100% !important;
}
.sbs_FieldTable select{
width:100% !important;
}

[Author]

Posts