Home › Forums › Classic DFFS › SBS – Unequal items per row…
- This topic has 6 replies, 2 voices, and was last updated 5 years, 7 months ago by BenR.
-
AuthorPosts
-
-
March 21, 2019 at 17:34 #24386
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.332Attachments:
-
March 21, 2019 at 19:32 #24395
Can you show me a screenshot of the setup and of any custom css you use to style it now?
Alexander
-
March 21, 2019 at 19:39 #24397
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:
-
-
March 21, 2019 at 20:04 #24404
Add this to your Custom CSS:
.sbs_OuterTable{ width:auto; }
Alexander
-
March 21, 2019 at 20:17 #24408
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:
-
-
March 21, 2019 at 20:25 #24411
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
-
March 25, 2019 at 17:50 #24429
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.
-
-
AuthorPosts
- You must be logged in to reply to this topic.