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

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

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.

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?

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!

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?

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! 

Thanks your continual support.

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

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.

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?

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!

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