Injecting CSS does affect the form on the Preview mode

I have 2 fields, a number field & textbox. I am trying to get the width of the textbox larger. When I enter the below custom CSS, the textbox changes size in the Build part of the form. However, if I Preview the form, or view the form Live on my website, it remains the shortened version of the textbox (roughly 150px). Thoughts?!

-----------------------------

Quantity: number :

Description: text :

-----------------------------

.col2 input[type="text"]

{

width:450px;

}

-----------------------------

Hello,

I've checked your form named "Quote Request" and I've seen your configurable list widget consists of a number and a text field.

I've also cloned your form on my side in order to test it and I've seen the error. The CSS code works in the form builder. However, it does not work in the preview version of the form.

So that, I've forwarded this issue to our software development team in order to fix the issue. You are going to be informed via this thread, as soon as the issue will be fixed.

Thank you for reporting us.

Hello @schera, have you tried adding !important to the css. That seem to work just fine for me. Like this

.col2 input[type="text"] { width:450px !important; }

Let me know if it doesn't work.

Regards,
Widget Team

Hello.  Yes, I have tried .col2 input[type="text"] { width:450px !important; } it behaves the same as:

.col2 input[type="text"]

{

 width:450px;

}

Either way, it updates correctly in the Build portion, but reverts back to 150px in the Preview & Live versions.  Thank you for your suggestion.  Let me know if there's anything else I can try.

Thank you for letting us know.

I will forward your message to our Widgets team.

Thank you for your patience.

I tried your form again @schera and it worked just fine. Can you try it again and see if the changes reflected. Also can you check it @Nik_C and confirm as well.

Also I saw how you put the important there. this is not a valid CSS format (width:450px; !important;)

Let me know if still doesn't work so I can further the check.

Regards,
Widget Team

Please check your CSS code like my colleague suggested.

And then try with clearing the form cache and Browser's Cache.

To clear your form cache please go to https://www.jotform.com/myaccount/settings

and click:

And to clear the Browser's cache you can use this guide: http://www.refreshyourcache.com/en/home/

Please let us know if the issue persists.

Thank you!

Not sure what changed, but I did a Ctrl-F5 with the incorrect CSS & it worked.

.col2 input[type="text"]

{

 width:450px; !important;

}

So then I changed back to the correct CSS & it also worked.

.col2 input[type="text"]

{

 width:450px;

}

Really unsure how it is working now, when the exact same code was not working before, but I'm happy it's working & I thank you for your time & looking into the issue.  Have a blessed day!

Glad to know it is working now. Open a new thread if you need anything else.