Width of selectboxes

Hi Bob

I have changed the frontforms-tight.css (as I;m using teh tight format) as follows in line 23

.cfdiv_text label { width: 150px; }
div.cfdiv_select select {
  width: auto;
  min-width: 10px;
  max-width: 65px;
  text-align:center;
}

Works nicely, however it affects all the forms 😟

Would this be possible to have this per specific form??

HI SPABO,

Sure, add the CSS to a Load CSS action in the form ON Load event and use the form id as a CSS selector to make sure it only applies to the one form.

Or use JavaScript in a Load JS action to change the styling for those form elements.

Bob

OK, however, two things:

use the form id as a CSS selector to make sure it only applies to the one form.

I put the code in the On Load CSS , but not sure where to "use the form id"

On teh other hand it works now, but....

It effects ALL teh other selectboxes as well🙄

So, would it be possibele the amend the width is each selectbox separately?

Hi SPABO,

Sure, add an ID to each select drop-down element and you can apply separate CSS to each of them.

Bob

No idea how to set up...
What should be the code in the OnLoad CSS

Wher to oput an ID in the select drop-down...

With some tuts from W3 Schools, here it is

#dag,#maand,#jaar
{
  width: auto;
  min-width: 10px;
  max-width: 65px;
  text-align:center;
}

And needless to say, each ID van be sperately defined!

Case closed...😀

Hi SPABO,

Well done :-)

Bob

One remark, once you you the multiline in, the CSS frontforms_tight.css(around line 121) you find 10px, thsi should be 5 px, to get it nicely aligned.

.multiline_add{	clear:none !important; float: left !important; padding-left: 5px !important; }//was 10