How can we change the width of TextArea on our form?

I can change the text area height but cannot change the width. Have changed column setting and tried custom css to no avail. Please help!

Hi,

I checked your form and found that there is a "max-width: 150px;" style is defined for ".form-textarea", that's why you can't change its width.

Also, you can see the result when the "max-width: 150px;" is disabled:

To overcome this issue, you need to find ".form-textarea" and delete the "max-width: 150px;" row in it.

For further assistance, please don't hesitate to contact us.

Thanks.

OK. Thats great news. Only one problem though. I actually deleted all the CSS in form styles before asking this question. Now when i go into form styles it is blank. I cannot find the css.

Hi again,

Sometimes, this problem occurs.

To overcome this, you need to open the "Designer" and made some changes only for show (you can revert those changes, if you want. All we need is saving on "Designer"), then save it and return to the "Form Builder". You will see the auto generated CSS codes in the "Inject Custom CSS". I'm sorry for that extra steps those you need to do.

OK. I got the css back and have deleted the css but it still will not change width.

Please do add the following CSS to your form:

textarea.form-textarea {
    max-width: 100%;
    width: 100%;
}

Now, this removes the 150px limitation that was set to it and sets it to use all of the available width on the form.

Since its parents are also limiting the width of the form, we should change the above to this:

li[data-type="control_textarea"] > div.form-input-wide, textarea.form-textarea {
    max-width: 100%;
    width: 100%;
}

now, both the text area and its first parent are using max width and to it we need to add just one final CSS code - the one that changes the width of the parent of both:

li[data-type="control_textarea"] {
    width: 400px;
}

So the final code (and the only that you should add to your form is:

li[data-type="control_textarea"] > div.form-input-wide, textarea.form-textarea {
    max-width: 100%;
    width: 100%;
}
li[data-type="control_textarea"] {
    width: 400px;
}

With the fact that the bold 400 above is the value that you can change to make it at the size that you want it :)

Please do add it to your form by following the steps here: Inject Custom CSS Codes

Please do add it at the bottom (after all the other code) and do let us know how it goes :)

Please do add the following CSS to your form:

textarea.form-textarea {
    max-width: 100%;
    width: 100%;
}

Now, this removes the 150px limitation that was set to it and sets it to use all of the available width on the form.

Since its parents are also limiting the width of the form, we should change the above to this:

li[data-type="control_textarea"] > div.form-input-wide, textarea.form-textarea {
    max-width: 100%;
    width: 100%;
}

now, both the text area and its first parent are using max width and to it we need to add just one final CSS code - the one that changes the width of the parent of both:

li[data-type="control_textarea"] {
    width: 400px;
}

So the final code (and the only that you should add to your form is:

li[data-type="control_textarea"] > div.form-input-wide, textarea.form-textarea {
    max-width: 100%;
    width: 100%;
}
li[data-type="control_textarea"] {
    width: 400px;
}

With the fact that the bold 400 above is the value that you can change to make it at the size that you want it :)

Please do add it to your form by following the steps here: Inject Custom CSS Codes

Please do add it at the bottom (after all the other code) and do let us know how it goes :)

OK That spread everything out and did fix the width of the notes field in builder. When i preview it is still small though. Also, once this is fixed is there a way to apply that to the theme so i do not have to fix the css each time.

Thanks!

If the theme is created by you, it should be possible to edit it from My Themes page.

Alternatively to the CSS injection, you may try increasing the Text Area width directly in form designer.

Thank you.

I understand this and have tried everything. It will not let me " increasing the Text Area width directly in form designer."

I took a look at your form and I can not see my CSS being active on it.

I did check your CSS and I see that it seems to be there, meaning that somewhere in it there is a CSS error.

I was able to track it down to a } missing in your CSS causing all new code to be seen as part of your media query code:

@media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {

...

To fix this I added } right above /* | *//*__INSPECT_SEPERATOR__*/ in your form's custom CSS field and it is now working.

You can see it in this clone of your form: https://form.jotform.com/52955861876978

Do let us know how it goes.

@Ivbmarketing I will address your inquiry here: http://www.jotform.com/answers/795093.