CSS to line up Side by Side Fields

Forums Dynamic Forms for SharePoint CSS to line up Side by Side Fields

Tagged: 

Viewing 5 reply threads
  • Author
    Posts
    • #6170
      Benjamin Hawcroft
      Participant

      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 ?

    • #6171
      Alexander Bautz
      Keymaster

      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

    • #6172
      Benjamin Hawcroft
      Participant

      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:
    • #6174
      Benjamin Hawcroft
      Participant

      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.

    • #6175
      Benjamin Hawcroft
      Participant

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

    • #6176
      Benjamin Hawcroft
      Participant

      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;
      }

Viewing 5 reply threads
  • You must be logged in to reply to this topic.