Column Alignment

[Kelly Turdanes]

Hi Alexander,

I’ve been trying to make the column alignment work but to no avail.
I’ve added the css script from here https://spjsblog.com/dffs/dffs-styling/ but my form doesn’t look how I expect it to be.

I’ve attached a screenshot of how it currently look. I was expecting it to be more aligned but the fields doesn’t seem to be adjusting as how it should be. Could you let me know what might be the reason please.

Thank you.

Kelly

Attachments:

1. 

   column-alignment.png
   

[Alexander Bautz]

Hi,
This article is a bit outdated because I have removed the “dffs_tdWrap” class (as noted in the top of the article) – can you show me the CSS you use now?

Alexander

[Kelly Turdanes]

Hi Alex,

Thanks. Yes I removed this css entry now and added the one particularly for TdIndex. My css entry below.

.ms-formlabel {
font-weight: bold;
}
.ms-formlabel h3.ms-standardheader {
font-weight: bold;
}

.ms-standardheader {
font-weight: bold;
}

td.ms-formlabel nobr {
white-space: normal;
font-weight: bold;
}

.tabH1, .tabH2, .tabH3 {
background-color: #44788b;
color: white;
padding-left: 5px;
text-transform: none;
}

.tablabel{
text-transform: none;
}

.sbs_tdIndex_1, .sbs_tdIndex_2, .sbs_tdIndex_3, .sbs_tdIndex_4 {
min-width:200px;
width:200px;
}
.childTableCell {
vertical-align: top;
}

thank you.

[Alexander Bautz]

Did it make any difference to your forms layout?

Alexander

[Kelly Turdanes]

No. There was no change in the layout.

Thanks.

Kelly

[Alexander Bautz]

Hi,
I have updated the article here.

Basically it was just a matter of removing the dffs_tdWrap from the selector like this:

.sbs_FieldTable *{
 width:auto !important;
}
/* Ensure the tooltip icon won't collapse */
.customTooltipIcon{
 width:18px!important;
}

Hope this gets you back on track.

Best regards,
Alexander

[Author]

Posts