Side-by-side

[Ally]

Hello Alexander,

I used the rules you provided in DFFS Styling, I was able to set most of the fields in a straight line (please see example attached), there are two fields that I couldn’t get it to line-up as the others. Could you please tell me what’s I’m missing here.

.sbs_FieldTable .dffs_tdWrap *{
width:auto !important;
}
.sbs_tdIndex_1, .sbs_tdIndex_2, .sbs_tdIndex_3, {
min-width:450px !important;
width:450px !important;
}
}
.sbs_tdIndex_4, .sbs_tdIndex_5, .sbs_tdIndex_6, {
min-width:450px !important;
width:450px !important;
}
}
.sbs_tdIndex_7, .sbs_tdIndex_8, .sbs_tdIndex_9, {
min-width:450px !important;
width:450px !important;
}

}
.sbs_tdIndex_10, .sbs_tdIndex_11, .sbs_tdIndex_12, {
min-width:450px !important;
width:450px !important;
}
}
.sbs_tdIndex_13, .sbs_tdIndex_14, .sbs_tdIndex_15, {
min-width:550px !important;
width:450px!important;
}

}
.sbs_tdIndex_16, .sbs_tdIndex_17, .sbs_tdIndex_18, {
min-width:auto !important;
width:auto!important;

Much appreciated

Attachments:

1. 

   Capture.png
   

[Alexander Bautz]

Hi,
First you have to many end curly braces “}” – try removing these as a start.

If this does not help, your problem is most likely that you have options in the dropdown that pushes the width. You can address it like this (assuming it is in index 13):

.sbs_tdIndex_13 select{
  max-width:200px; /* Change 200 to any number that fits your form widht */
}

Hope this helps,
Alexander

[Ally]

Thanks so much Alexander,

Somehow it doesn’t work for me. It could be me because I have very little experience with CSS. Do you by chance have any samples for beginner?

I appreciate the helps!

[Ally]

I finally got it to work not. Thanks so much Alexander :)!

[Alexander Bautz]

I’m glad you figured it out.

Alexander

[Ally]

Hello Alexander,

Is there a way to set fields in DispForm (image #2) to look exactly like the EditForm (image #1)?

Thanks

Attachments:

1. 

   Image1.png
   

2. 

   Image2.png
   

[Alexander Bautz]

Hi,
I’m aware that the styling of the forms is a bit cumbersome, and I’ll see what I can do about in a future version.

Depending on how you have set it up in NewForm, you should be able to use more or less the same CSS. This example CSS is used in both NewForm, DispForm and EditForm on a form with three columns of SBS-columns:

/* First set all width to auto */
.sbs_FieldTable .dffs_tdWrap *{
	width:auto !important;
}
/* Set column 1, 2 and 3 to a width of 200px */
.sbs_tdIndex_1, .sbs_tdIndex_2, .sbs_tdIndex_3{
	min-width:200px !important;	
	width:200px !important;
}

Alexander

• This reply was modified 8 years, 10 months ago by Alexander Bautz. Reason: Fixed comments in CSS

[Author]

Posts