Custom Field Widths on Single Line Layout using CSS

One page 4, I have three controls on one line:

id_221 (Full Name)

id_222 (Phonetic Spelling)

id_223 (Experience Level)

I'm trying (using the form's custom CSS) to set their widths. I want id_222 to be 250px, id_223 to be 230px, and then id_221 to take up the rest of the space on the line.

I have tried every combination of selectors I can think of and I've been working at this for over an hour and I've gotten nowhere.

I've managed to work magic on id_226 (Days Attending), but I can't seem to get anywhere on the others. Any assistance you can offer would be greatly appreciated.

Hi realcampcardboard, 

You can easily adjust the width of the fields Injecting CSS Codes into your form. Let me walk you through it:

1. First, copy this code:

/* Fixed widths */

#id_222 {

  width: 250px !important;

  flex: 0 0 250px;

}



#id_223 {

  width: 230px !important;

  flex: 0 0 230px;

}

#cid_220 {

  display: flex;

  gap: 10px; /* Optional spacing between fields */

}

/* Flexible width */

#id_221 {

  flex: 1 1 auto;

  width: 340px !important;

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Check out my screenshot below to see the result:If that’s not exactly what you’re looking for, can you explain a bit more so I can help you better?

Give it a try and let us know how it goes.

Well, that kind of worked. I also noticed that my 'magic' on id_226 needs some work as well.

Here's what I see while I'm building the form:

However, when I preview it, I'm getting something quite different:

Note the I intentionally changed the width of id_223 just to make it a value that would be noticeable. So, my questions are 1) why are the widths of id's 221, 222, & 223 not displaying correctly in the editor and 2) why is everything on the same line for id_226 in the editor, but jump to two lines in the preview?

As you can see, the relevant CSS is pasted into the second image. Also, just to make sure I'm working with a 'clean' environment, I cleared my Jotform cache, I conducted an 'empty cache and hard reset' on my browser, and I even tried it on a different browser. In all cases, the outcome was the same.

Hi realcampcardboard,

I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

Hi realcampcardboard,

I reviewed your screenshots and CSS. The different layouts you’re seeing come from two things. The live Preview applies the form’s real responsive rules and width, so it’s narrower than the Builder, and the rules you applied target the whole question wrapper #id_22x, which also contains the label. In Preview, this can force the label to stack and override your widths. The reliable fix is to size the input container inside each question and let the first field flex to fill the remainder, plus add a mobile fallback. After making adjustments, here's how the fields look on my cloned form as you see them in the screencast below:

You can apply these changes by Injecting CSS Codes into your form. Let me walk you through it:

1. First, copy this code:

#id_223 {

    width: 23px !important;

    flex: 0 0 250px !important;

}

div#cid_226 {

    width: 668px;

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down, and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Give it a try and let us know how it goes.