Configurable List Widget: Injecting CSS does affect the form on the Preview mode

  • Profile Image
    schera
    Asked on February 08, 2017 at 01:13 AM

    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;

    }

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



    This is a re-post of a comment on How to Set Up the Configurable List Widget

  • Profile Image
    candy
    Answered on February 08, 2017 at 02:17 AM

    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.

  • Profile Image
    widgets
    Answered on February 08, 2017 at 07:48 AM

    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

  • Profile Image
    schera
    Answered on February 08, 2017 at 01:00 PM

    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.

  • Profile Image
    Nik_C
    Answered on February 08, 2017 at 02:33 PM

    Thank you for letting us know.

    I will forward your message to our Widgets team.

    Thank you for your patience.

  • Profile Image
    widgets
    Answered on February 08, 2017 at 03:34 PM

    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

  • Profile Image
    Nik_C
    Answered on February 08, 2017 at 04:02 PM

    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!

  • Profile Image
    schera
    Answered on February 08, 2017 at 05:32 PM

    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!

  • Profile Image
    BDAVID
    Answered on February 08, 2017 at 08:03 PM

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