SBS – Unequal items per row…

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

Tagged: ,

Viewing 4 reply threads
  • 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.

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