Side By Side Alignment Issues.

Forums General discussion Side By Side Alignment Issues.

Viewing 10 reply threads
  • Author
    Posts
    • #13853
      Harley Malamut
      Participant

      Hi Alexander,

      I set up the Side By Side feature on the New Form for a list that I am working on and have encountered issues with field label and field alignment.

      I want to place 2 fields per line on the form and only show the field label for the first field. So in essence there will be 3 columns. The first column will be the field label for the first field in each row or line, then the first field in the second column and the second field in the third column all on the same line or row.

      “Address”, [Address1], [Address2]

      “City”, [City1], [City2]

      I have attached a Word doc with screen shots to show you what a section of the form looks like and the side by side settings that I set up for that section of the form.

      I am sure this is just some simple setting that I am missing.

      Thanks,

      Harley

    • #13856
      Harley Malamut
      Participant

      Just noticed that the screen shots in the attached document show that the fields are aligned as follows.

      The field label for the first field is set to show above the first field. And no field label displays for the second field.

      “Address”
      [Address1] [Address2]

      “City”
      [City1] [City2]

      Being able to use either approach is what I am looking for.

    • #13884
      Alexander Bautz
      Keymaster

      Hi, Sorry for the delay.

      You can set up as your first example by using the the SBS-Index in the “Side-by-side settings” tab like shown in the attached images.

      Hope this helps,
      Alexander

      Attachments:
    • #13918
      Harley Malamut
      Participant

      Hi Alexander,

      That worked as far as the alignment of the fields and the Side-by-Side labels!

      However, I still have an issue with setting the column width for the 2 columns that contain the fields and the width of any field configured as Person or Group. Please see the first attached Word doc for a screen shot of what the Person or Group field looks like.

      And after getting the fields and labels to align, another issue has cropped up. It looks like fields and labels that are hidden by the rules that I have in place now leave a blank line on the form. When the user first creates a new record, the form will show one heading and a field configured as a radio button underneath that heading. When the user selects a value from the radio button, some of the fields show and others are hidden from the user. Prior to making the selection from that field, numerous blank rows or lines show below that one exposed field.

      I am attaching another Word doc that contains screen shots of this issue.

      Thanks….

    • #13931
      Alexander Bautz
      Keymaster

      The reason for the blank lines is that hiding each field in the sbs-row will not hide the outer wrapping. To get rid of the lines, you must hide the entire sbs-row by the id like this (instead of hiding each field):

      sbs_OuterTR_4444

      Change “4444” to match the sbs-index.

      The people picker field can be addressed in the “Field CSS” tab to set the width:

      .sp-peoplepicker-topLevel, .ms-inputuserfield{
          width:200px;
      }

      This is unfortunately a bit cumbersome, but hopefully you get it aligned.

      Let me know how it works out.
      Alexander

    • #14012
      Harley Malamut
      Participant

      Hi Alexander,

      I am currently implementing the use of hiding the whole row. Will let you know how that works out.

      However, it looks like the CSS for the people picker does not work. I’ve attached a Word document with 2 screen shots. The first screen shot shows the field on the Field CSS tab with the CSS that you provided. The second shows what the actual field looks like when the form is opened. The people picker field is still very narrow.

      Is there something that I am missing?

      Thanks….

    • #14052
      Alexander Bautz
      Keymaster

      This is most likely caused by the “selector” in my CSS not matching your field. Try right clicking the the “input” field (the one you type into) and select “Inspect element”. Look a the HTML code and identify the class attribute. Does it match “sp-peoplepicker-topLevel” or “ms-inputuserfield”?

      Alexander

    • #14064
      Harley Malamut
      Participant

      It matches “ms-inputuserfield”.

      Here is a Word doc with a screen shot.

      Thanks….

    • #14067
      Alexander Bautz
      Keymaster

      Did you put the people picker CSS in the Field CSS tab? – if not, this code in the Custom CSS will overrides it:

      .sbs_FieldTable .dffs_tdWrap *{
      	width:auto !important;
      }

      Alexander

    • #14071
      Harley Malamut
      Participant

      I added the people picker CSS in the Field CSS tab. Some of the screen shots from my earlier entries show that.

      However, I also had the following code in the Custom CSS tab. The explanation for this on your site led me to believe that I needed to add it.

      .sbs_FieldTable .dffs_tdWrap *{
      width:auto !important;
      }

      Just removed it and the field width of all of the people picker fields now looks a lot better.

      That solved it!

      Thanks…..

    • #14079
      Alexander Bautz
      Keymaster

      I’m glad you was able to get it right. This is a bit cumbersome to set up as SharePoint has it’s own set of styles applied, and when DFFS tries to override these styles you sometimes end up with conflicting rules.

      Alexander

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