Alingment Help

[Sanchez]

I have an edit form that I’m struggling to align correctly. I’ve found a few CSS answers on here but when I apply them it breaks another area. The form is a side-by-side form of up to 4 columns. I’m trying to center the header to run across all four fields. I’ve tried this solution but then it narrows the single item rows questions and answers down to the width of the first column only. (I’ve left the ‘index number’ in the tab settings as blank but doing this it sets the label position (survey question) on the left instead of above answer box.

`.sbs_InnerTR {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
justify-content: flex-start;
}

I also need to align the data within a few fields and allow the answers to single item rows to be able to flow the width of the table.

Here is my complete CSS page:
`
.sbs_FieldTable *{
width:auto !important;
}

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

/*Set fixed column width when using side-by-side*/

.sbs_tdIndex_1, .sbs_tdIndex_2, .sbs_tdIndex_3, .sbs_tdIndex_4{
min-width:200px !important;
width:200px !important;
white-space:normal!important;
}

/*Override the width of the sbs_OuterTable in later DFFS versions*/
.sbs_OuterTable{
width:250px;
}

/*Set the width of the formlabel column to line up multiple field labels when using side-by-side*/
.ms-formlabel{
width:130px!important;
white-space:normal!important;
}

/*Remove padding below fieldlabel and increase the size of the formlabel when using side-by-side*/
.sbs_FieldLabel{
height:auto;
}

.sbs_FieldLabel .ms-formlabel{
font-size:1.2em;
font-weight:500;
padding:2px 2px 0 2px;
}

/*Set the Width of the Dropdowns*/
.sbs_InnerTR select{
width:190px;
}

.dffsTabRow {
border: none !important;
}

.dffsHTML_Stat1 {
text-align:center;
}

/* to edit section HEADERS*/
.tabH1 {
text-align:center;
color:crimson;
font-size: 20px
}

tr[id^=”dffsHTML_”] .dffs_headingOrHTMLWrap {
padding: 10px;
max-width: 900px;
}

.ms-formtable h2,
.ms-formtable h1 {
color:dodgerblue;
}

.ms-formtable tr[id^=”dffsHTML_”] a {
font-weight:bold;
}

#part1 select,
#part1 input:not([type=”checkbox”]):not([type=”radio”]):not(.sp-peoplepicker-editorInput),
#part1 .sp-peoplepicker-topLevel,
#part1 .ms-rtestate-field.ms-inputBox,
#part1 textarea {
border: 1px solid #ABABAB;
border-radius: 4px;
-webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
-moz-box-sizing: border-box; /* For legacy (Firefox 29) Gecko based browsers */
box-sizing: border-box;
}

#part1 input:not([type=”checkbox”]):not([type=”radio”]):not(.sp-peoplepicker-editorInput):focus,
#part1 .sp-peoplepicker-topLevelFocus,
#part1 .ms-inputBoxActive:focus,
#part1 select:focus,
#part1 textarea:focus,
#part1 .ms-inputBoxActive .ms-rtestate-field:focus{
box-shadow: 0 0 10px;
border:1px solid #B0CFE0;
}

/* to edit FIELD NAMES.QUESTIONS */
.ms-standardheader {
font-size: 14px;
color:steelblue;
/*font-weight:bold;*/
margin-right: 5px!important; /*When a customToolTip is used, it adds a margin-right of 20px which isn’t necessary*/
}

.ms-formbody,
.ms-formlabel,
.dffs-readonly-inner {
padding: 5px!important;
}

.ms-formlabel{
width: auto!important;
white-space:normal!important;
}

.ms-formtable > tbody > tr {
background-color: #eee;
}

.ms-formtable {
margin-bottom: 10px;
border: 1px solid lightslategray;
box-shadow: 0 0 10px;
border-radius: 4px;
}

/* MAKES ANSWER BOXES NARROW */
.sbs_FieldTable *{
width:auto!important;
text-align: left;
}

.sbs_OuterTable {
width: 100%!important;
border-top: thin solid lightgray;
}

.sbs_InnerTR .spjs_casc_multi,
.sbs_InnerTR table[id^=”casc_multiselect”] {
width:100%!important;
}

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

.customTooltip{
float:none!important;
display:inline!important;
margin-right:5px;
}

/* MAKES QUESTIONS NARROW PER COLUMN BUT IT CENTERS SECTION HEADERS
.sbs_InnerTR {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
justify-content: flex-start;
} */

.sbs_InnerTR td[class*=”sbs_tdIndex_”] { /
width: 250px;
align-self: stretch;
text-align: left;
! flex: 1;
/*Use flex:1 if you want your sbs columns to stretch the entire width of the form, otherwise leave it off if you want your columns to always line up. Example, if you have a sbs row with 4 columns, and below that you have a sbs row with 3 columns, then without flex:1, the columns will line up evenly, but with flex:1 turned on, then they will space out using all the available width. They will still look good, just won’t be all lined up*/
}

.ms-rtestate-write {
text-align: left;
}

.ms-rtestate-write * {
/*I hate it when people use custom font*/
font-family:sans-serif!important;
font-size: small!important;
}

.sbs_Field select {
/*If you have a select option with a really long text string, this will make it so that it doesn’t bleed over into its neighbors column*/
max-width: 230px!important;
text-overflow: ellipsis;
}

.sbs_Field .ms-rtefield {
min-width: auto!important;
}

.sbs_FieldTable .sp-peoplepicker-topLevel,
.sbs_FieldTable .sp-peoplepicker-topLevelDisabled {
min-width:200px!important; /*These shrink up horribly when used in sbs*/
text-align:left;
}

td[id$=’_casc_btnWrap’]{
padding-top:14px; /*Better aligns the add/remove arrow buttons for multi choice cascading dropdowns*/
}

.ms-RadioText {
white-space:nowrap; /*makes multi-choice radio checkboxes easier to read instead of wrapping and looking messy*/
}

.sbs_FieldLabel{
height:auto;
}

.dffs-readonly-inner {
min-width: auto!important; /*Overwrites the min-width that gets set automatically which made the form format extremely wide on occasion when there is a lot of text in a field*/
padding: 10px;
}

.sbs_Field .ms-metadata {
display:none;
}

.sbs_Field .ms-rtestate-field.ms-inputBox,
.sbs_Field textarea {
max-height:200px;
overflow-y:auto;
resize: vertical;
}

#idAttachmentsRow {
background-color: lightsteelblue;
}

#idAttachmentsTable td img {
margin-left:20px;
}

#Attachments {
color: #444!important;
}

#Attachments > nobr {
vertical-align:middle;
}

• This topic was modified 4 years, 6 months ago by Sanchez.

[Sanchez]

I lied, this snippet is actually commented out.

`/* MAKES QUESTIONS NARROW PER COLUMN BUT IT CENTERS SECTION HEADERS
.sbs_InnerTR {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
justify-content: flex-start;
} */

[Sanchez]

I commented out the following snippet and it help aligning the answers section of my screenshot..

`/* MAKES ANSWER BOXES NARROW
.sbs_FieldTable *{
width:auto!important;
text-align: left;
}*/

Still haven’t figured out how to center the headers and expand the answer text boxes of the screenshot.

[Sanchez]

I’ve been able to set a fix width to the answer rows using the Field CSS but it only works on ‘Text” fields not on ‘Notes’. Code used:

`input{
width:900px!important;
}

[Alexander Bautz]

Hi,
It’s hard to give you exact answers without looking at your setup, but here are some hints:
Center headings:
use this CSS either in the CSS or ClassName in the heading config, or in the Custom CSS class you have defined in the Custom CSS tab:

text-align:center;

Set fixed width of the first and second column of a sbs setup:

/* First column */
.sbs_tdIndex_1{
    width:400px!important;
}
.sbs_tdIndex_1 .ms-formlabel{
    width:150px!important;
}
/* Second column */
.sbs_tdIndex_2{
    width:400px!important;
}
.sbs_tdIndex_2 .ms-formlabel{
    width:150px!important;
}

The above will address ALL SBS fields in the form. If you like to address individual rows with different CSS you can do it like this by using the unique ID of the sbs_OuterTR:

/* Address only one SBS row by SBS Index */
#sbs_OuterTR_123123 .sbs_tdIndex_1{
    width:400px!important;
}
#sbs_OuterTR_123123 .sbs_tdIndex_1 .ms-formlabel{
    width:150px!important;
}

To specify the width of an input in a SBS row you can use this code:

/* Specify the width of a SBS input by the SBS index */
#sbs_OuterTR_234234 input{
    width:600px;
}

The numbers 123123 and 234234 are the SBS-index specified for that field in the tab.

I hope this gets you on track.

Alexander

[Author]

Posts