CSS to line up Side by Side Fields

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

Tagged: 

This topic contains 5 replies, has 2 voices, and was last updated by  Benjamin Hawcroft 4 years, 7 months ago.

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

You must be logged in to reply to this topic.