Adjusting width length of a specific field in fill in the blank.

Hello,

I am trying to adjust the length of a particular field in a fill in the blank element.

I used this code:

I see it on my build, but not on my preview.

Here is the build:

Here is the preview:

Hi Eva,

Thanks for reaching out to Jotfrom support. If you want to make the Pay Period field of the Fill in the Blank element longer, you can apply a custom CSS code.

1. First, copy this code:

#FITB_132 > p > span:nth-child(2){

  width: 350px!important;

}

#\31 32_shorttext-7{

  width: 350px!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.

You can also check out this guide about How to Inject Custom CSS Codes. Here's the result:

Also, you can remove the code that you previously entered.

Reach out again if you have any other questions.

Thank you for this code, but how would it work if I wanted to shorten the length of another field within that fill in the blank. i.e. the "Quarter" dropdown field?

Hi Eva,

You would need some knowledge in HTML and CSS to create your own styling code. But, let me show you how you can do it:

1. Open the published version of the form on a new tab.
2. Look for the field you want to adjust the styling, and right click on it.
3. In the menu that appears, click on Inspect. It should open the Developer Pane on the right side of the page.
4. The CSS selector for the field will be highlighted automatically, so under the Styles tab, click on the plus icon to add a new style rule.
5. Simply add a value in pixels (px) to the min-width property to something smaller than 120px, as this is the default. To do that, click inside the curly braces of the CSS selector you just added.
6. Then, type in min-width:100px; to change the default width to 100px instead of 120px. You could see the changes showing on the live form as you add the new value.
7. Next, copy the style rule you created by highlighting it, then press on CTRL + c simultaneously on your keyboard to copy the code, or simply right then choose Copy from the menu that opens.
8. You can then paste that to your form's Inject Custom CSS Code box in the Form Builder, following my colleague's instruction here.

The code will be applied to that specific element. You can try the same on other fields of the form.

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

Thank you so much. I made the adjustments and they seemed to have worked, however now the display is way off. The monthly earnings fields is spilling onto the second line. Ideally, Quarter, percent time, and monthly earnings should be on one line and then the last field on the second.

Hi Eva,

Glad to hear that worked for you. I checked the out the custom CSS codes of your form and found out lines 167-169 is causing that issue. Try removing it from the Inject Custom CSS code box and that should fix it. Let me show you how:

1. Open your form in Form Builder, and click on the Paint Roller icon on the right side of the page to open Form Designer.
2. Now, in the Form Designer menu, click on the Styles tab, scroll down to lines 167 to 169 of the Inject Custom CSS code box, and remove the code there.

The result should look like this:

I noticed there's an extra field after the Monthly Earnings of the first Fill-in-the-Blank field. You can remove it if it's no longer needed.

Give it a try and let us know if you need any more help.

Thank you so much, John! That was what Joseph above asked me to put into the styling sheet!

Hi Eva,

I believe that suggestion came up because the initial request was to increase the length of the Pay Period field. When I checked the first Fill-in-the-Blank field on your form, I noticed that Pay Period is no longer added. If you'd like to add it back, you're welcome to do so. I added it to my cloned form, and it stays on the same line, though it's a bit shorter this time. Take a look at the screenshot below for my result:

Let us know if there’s anything else we can help you with.

I"m so sorry, I did this and it worked, but the same coding for the other fill in the blanks do not respond to the css I added now. See below screenshots:

Hi Eva,

You would also need to apply the width value to the other two fields. In this case, you can use the following codes:

/* fitb width - 25670241*/

#\31 76_shorttext-7, #\31 77_shorttext-7 {

  width: 450px !important;

}

/* Ends here */

Here's how it would appear:

Give it a try and let us know if you need any help.

Hi Raymond,

The code for the shorttext fields works, but it didn't work for the number fields and drop-down.

Best,

Eva

Hi Eva,

Can you tell us which Number and Dropdown fields you want to adjust the width so we can directly provide you with the appropriate CSS code to modify your form? You can send us a screenshot so we can easily locate it on our end. If you can take a screenshot of what’s happening, that'll help us to understand better what’s going on. Let me show you how to post a screenshot to our Help Center:

1. On the Help Center page, scroll down to the Your Answer section and click on the Image icon.

2. Drag and drop your image into the Upload box, or click on it and select your file.

3. Then, click on the Add button in the bottom-right corner of the window.

4. To resize it, click on your screenshot and then click on one of the boxes in the corners, and drag it inward.

5. Once you're finished, click on the Post Answer button at the bottom right of the Your Answer section.

That's it. Once we hear back from you, we'll be able to help you with this.

These fields can all be shorter. I hope this helps!

Hi Eva,

I understand what you’d like to do, but I’ll need a bit of time to work out a solution. I’ll get back to you shortly.

Thanks for your patience, we appreciate it.

Hi Eva,

You can try using this code below:

span.FITB-inptCont[data-type=textbox] input,

span.FITB-inptCont[data-type=selectbox] select.form-dropdown{

 min-width: 20px!important; 

 width: 50px!important;

}



#FITB_132 > p > span:nth-child(3),

#FITB_176 > p > span:nth-child(3),

#FITB_177 > p > span:nth-child(3) {

  margin-right: 20px!important;

}

This will make the dropdown and the text fields shorter. Take a look at this screenshot for the result:

Also, is the blank line at the bottom really necessary? You could save some space if we'll just remove it.

Let us know if there’s anything else we can help you with.

The blank line has conditional logic that adds text to it. The re-sizing worked, however it there a way so I can bring the "blank line" up so that it is all on one row?

Hi Eva,

To ensure that they're on the same line, we have to reduce the width of the short text field. To do that, apply the following codes below:

.FITB > p > span:nth-child(4) {

  max-width: 315px !important;

}

.FITB > p > span:nth-child(4) > input {

  max-width: 300px !important;

}

Here's how it would appear:

Give it a try and let us know if you need any help.