How do I change the length of a form type in field?

Hello, 

See the screen shot attached.  (Ignore the white space inbetween - I had to try to white out intermediate questions for the screen shot, due to the file upload limit of 500Kb.)  

'Names of Children' is a duplicate of 'Health Insurance Company'.  They both show to have a width of "20".   Yet, on the Preview, one form field is long and one is short.   What is controlling this?  I want the 'Names of Children' to be long (as is 'Health Insurance Company').  

Thank-you!

You can increase the width of the "Name of Children" field by using custom CSS. Here's the code:

#cid_374 .form-sub-label-container, 
#cid_375 .form-sub-label-container, 
#cid_376 .form-sub-label-container {
   width: 100% !important;
}

Here's a guide on How-to-Inject-Custom-CSS-Codes. Here's the result:

Hope that helps. Thank you.

Hello, 

Thank-you!  But can you please explain this code?

1) I found the 374, 375, 376 as the Field ID after looking at the Properties - Advanced - Field Details

    Not sure what the cid_  is?  The Field Detail shows  input_  and not cid_ ?

2) What is the .form_sub_label-container?

3) I decided to make it 80% rather than 100% and then decided to change Health Insurance and Policy Number to be shorter as well.   So I assumed I'd need to add this:

#cid_308.form-sub-label-container,

#cid_309.form-sub-label-container,

#cid_374.form-sub-label-container,

#cid_375.form-sub-label-container,

#cid_376.form-sub-label-container {

  width: 80% !important;

}

   But that did not work.  How do I control the width of Health Insurance and Policy Number?

4) Where can I find documentation on all css functionality/commands?

5) I did not write css code to control the size of other widgets.  How is it that some of those are short or long - without specific code controlling their widths? 

Thank-you!

1) The field ID you found under Properties window is the ID of the field, but fields are usually nested in a div tag, and the ID you mentioned cid is the ID of one of the divs. You can find more about how to find the field's ID here: https://www.jotform.com/help/146-How-to-Find-Field-IDs-and-Names

2) It is the class of the field, you can see that because it starts with a dot.

3) To find the right ID of the field, the best way is to use Inspect Element feature of the Browser:

So for Health insurance field, the right CSS code will be:

#cid_308 {

    width: 80%;

}

And for Policy Number it will be:

#cid_309 {

    width: 80%;

}

4) You can start here https://www.w3schools.com/cssref/ they cover almost everything related to CSS (and everything else related to HTML).

5) This depends on the content of the widget and purpose, but it can be adjusted with the method I showed in my reply in this thread. Of course, if you need any assistance you can let us know.

Thank you!

Hello, 

Thank-you!  That worked!  But I am still trying to understand it, so that next time, I can make the change myself.

I am trying to locate how you knew the id was  #cid_309  (for example).

Chrome ->  upper right hand corner the 3 vertical dots -> More tools -> Developer tools -> Element  (while on the web page with 'Health insurance" selected).

I do not see what you have appended as a screen shot.   Is the above the correct way to get to the field id?  or?

Thank-you!

Here is how you find the appropriate ID of the field:

1) Right click on a field and then Inspect:

2) The elements section will open and it will automatically highlight the field:

But the div you need is the one right above the marked section. And you will notice that because it will highlight the field in the upper part of the screen:

So you move your cursor through the code in the bottom part and look what is marked in the upper part of the screen. Of course, you have to look at the code as well so you will be in the right div of the right field.

Hope it makes sense.

Let us know if you have any further questions.

Thank you!