SBS – Unequal items per row…

[BenR]

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

Attachments:

1. 

   SBS-Uneven-items-per-row.png
   

[Alexander Bautz]

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

Alexander

[BenR]

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

Attachments:

1. 

   SBS-Uneven-items-per-row-Setup.png
   

[Alexander Bautz]

Add this to your Custom CSS:

.sbs_OuterTable{
    width:auto;
}

Alexander

[BenR]

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.

Attachments:

1. 

   SBS-Uneven-items-per-row-WithCSS.png
   

[Alexander Bautz]

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

[BenR]

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.

[Author]

Posts