SBS – Unequal items per row…

Forums Dynamic Forms for SharePoint SBS – Unequal items per row…

Tagged: ,

This topic contains 6 replies, has 2 voices, and was last updated by  BenR 5 months, 3 weeks ago.

  • Author
    Posts
  • #24386

    BenR
    Participant

    Alexander,

    In the attached image, I have SBS rows with a different number of fields per row (i.e.: row-1: 1 item, row-2: 4 items, row-4: 2 items. Row-4 spreads the two items across the table width, looking awkward. Is there a way to move the second item on row-4 to the left? This form has several other sections, and fixed column widths seem to affect the overall form – outside this particular problem section.

    In advance, thank you for your support and efforts!

    R’grds – Ben.
    Dynamic Forms for SharePoint v4.4.3.64 – March 13, 2019|CSS version: 4.46 / 4.46|spjs-utility version: 1.332

  • #24395

    Alexander Bautz
    Keymaster

    Can you show me a screenshot of the setup and of any custom css you use to style it now?

    Alexander

    • #24397

      BenR
      Participant

      Alexander,

      The following is on my Custom CSS tab, attached is a screenshot of setup.

      R’grds – Ben.
      Reference:
      Custom CSS:
      /* Remove padding below fieldlabel and increase the size of the formlabel when using side-by-side */
      .sbs_FieldLabel{
      height:auto;
      }
      .sbs_FieldLabel .ms-formlabel{
      padding:2px 2px 0 2px;
      }

      /* Selected tab color */
      li.tabSelected a {
      color: #ffffff !important;
      background-color: #5fa364 !important;
      border-bottom-color: transparent;
      }

      /* Position tooltip icon to left */
      .customTooltip{
      float:left!important;
      display:inline;
      margin-right:5px;
      }

      /* Header of tooltip call-out */
      div.tooltipHolderHead {
      background-color: #5fa364;
      }

      /* Color of Alert dialog */
      div.dffs_dlg_header {
      background-color: #5fa364;
      }

      input.spjs-dlg-btnOK {
      background-color: #5fa364;
      border: 1px #5fa364 solid;
      }

      /* Border color of tooltip call-out */
      span.tooltipContents {
      border: 1px #5fa364 solid;
      }

  • #24404

    Alexander Bautz
    Keymaster

    Add this to your Custom CSS:

    .sbs_OuterTable{
        width:auto;
    }

    Alexander

    • #24408

      BenR
      Participant

      Alexander,

      The addition of the Custom CSS did bring all the fields to the left, it is also affecting all the fields on three tabs… I’ve attached a screenshot that shows the result.

      However, in my case, the other sections of this and the other tabs are affected too much to use.

      Is there such a thing as a dummy field? In HTML, you would use a “spacer.gif” to force table rows into alignment… In my case, I would put two more fields at the end of the fourth row.

      R’grds – Ben.

  • #24411

    Alexander Bautz
    Keymaster

    You can target only one “row” like this – 234 is the side-by-side index you set in the tab:

    #sbs_OuterTR_234 .sbs_OuterTable{
        width:auto;
    }

    Alexander

  • #24429

    BenR
    Participant

    Alexander,

    This worked really well! I’ve used this method across each row in the table, and the layout is specific to only this one section of the overall form.

    Really appreciate your support and efforts!

    R’grds – Ben.

You must be logged in to reply to this topic.