I can't get configurable widget to expand to the width of the form by default.

  • Profile Image
    GranvilleRefs
    Asked on January 19, 2017 at 09:30 AM

    I can't get my widget to expand to the width of the form by default. Even in edit mode when dragging the size of the text area fields, only half the width of the form can be used. https://form.jotform.co/70134945517861



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

  • Profile Image
    Kiran
    Answered on January 19, 2017 at 11:23 AM

    I have checked your JotForm and see that the Configurable list is displayed only half the width.

    This seems to be the issue with the theme settings. This can be resolved by injecting the following CSS code to the form.

    .custom-field-frame.custom-field-frame-rendered.frame-ready {

        width: 100% !important;

    }

    Hope this information helps.

  • Profile Image
    GranvilleRefs
    Answered on January 19, 2017 at 06:14 PM

    Hi. Thanks for the solution. 

     

    I have three Configurable lists in this form. Your solution fixed only one of them. There is another Configurable list just above the one you have taken an image of and another Configurable list on the very first page of the form. They still can only use less than half the width of the form.

     

    Is there a solution that fixes all of them?

  • Profile Image
    Kiran
    Answered on January 19, 2017 at 08:35 PM

    I didn't notice them as the widget is only having textarea fields. Sorry about that. Please change the injected CSS code to the following.

    #customFieldFrame_119 {

    width: 100% !important;

    }

    This code will be applied to the specific widget only and the other widgets should be displaying normally.

    Thanks!

     

  • Profile Image
    GranvilleRefs
    Answered on January 19, 2017 at 10:33 PM

    I have injected 

    #customFieldFrame_119, #customFieldFrame_120 {

    width: 100% !important;

    }

     

    I works for customFieldFrame_119 (the bottom Configurable List) but it doesnt work for customFieldFrame_120 (the top Configurable list).

     

    Any reason?

     

  • Profile Image
    Kiran
    Answered on January 19, 2017 at 11:40 PM

    Since the widgets are loaded on an iframe inside the form, the width of the widgets will be changing based on the width of the form. Sometimes it may be necessary to have different CSS code to be applied for the widgets. 

    You may remove the #customFieldFrame_120 from the CSS code since it is displaying normally without applying the CSS. If you add more columns to the widget, we might need to apply the CSS code then.

    Thank you! 

  • Profile Image
    GranvilleRefs
    Answered on January 19, 2017 at 11:55 PM

    Thanks your continual support.

     

    #customFieldFrame_120 is not working normally. It only uses 50% of the form width. How can i fix it.

     

  • Profile Image
    candy
    Answered on January 20, 2017 at 03:00 AM

    Hello,

    I have checked your form and I have seen the issue you have mentioned as the screenshot below:

    I have seen that you have used a configurable list widget and added 2 text areas inside. 

    Please delete the following CSS code that you have injected:

    #customFieldFrame_120 {

    width: 100% !important;

    }

    This code causes to make the table cut off from the right side and the buttons on the left do not appear as you can see the screenshot of the normal case below:

    Deleting those codes that I have written above is the solution.

    Please try. If you need further assistance, let us know.

    Thank you for contacting us.

  • Profile Image
    GranvilleRefs
    Answered on January 20, 2017 at 03:59 AM

    Hello Candy

    Thanks for your solution. I tried this but it did not work.

     

    In you second picture if you try to enlarge the left text area to you will see the right text area disappear mid way in the form.

    Before enlarging

     

    After enlarging

     

    The CSS code was never there to start with when it wasn't working. I put the code there on jotForm support's advice to fix the problem but it did not fix it. So I don't see how removing it is going to fix it. Any way it is removed now and still no luck. 

     

    Any solution?

  • Profile Image
    Nik_C
    Answered on January 20, 2017 at 05:25 AM

    Please try the following:

    1. In the Custom CSS field add this:

    .custom-field-frame.custom-field-frame-rendered.frame-ready {

        width: 800px !important;

    }

    2. And in the Custom CSS of the widget, please add this:

    .col1 textarea

    {

     width:300px;

    }

    .col2 textarea

    {

     width:300px;

    }

    That worked for me fine:

    Please let us know if you have any further questions.

    Thank you!

  • Profile Image
    GranvilleRefs
    Answered on January 20, 2017 at 05:41 AM

    Thank you this fixed it. It took a few tries but i finally have it fixed :)