The widget does not automatically adjust the remaining columns

  • dscott001
    Asked on August 16, 2020 at 9:09 AM

    Hello, the widget does not automatically adjust the remaining columns to the width of the form. I am removing and customizing the columns, but noticed that the size of the columns remains constant and does not automatically adjust to the width of the form. Can you assist?

  • John Support Team Lead
    Replied on August 16, 2020 at 10:18 AM

    Hello @dscott001 - A horizontal scrollbar will be added to the widget if it's width is wider than the form.

    The widget does not automatically adjust the remaining columns Image 10

    Now, if you want to get rid of this scrollbar, I suggest having the fields vertically-aligned instead.

    To do that, please add this code to the widget:

    #list tbody:first-child > tr:first-child {display: none;} #list {width: 100%; border-collapse: collapse;} #list tbody:first-child > tr > td{display:block; padding: 6px 0;} #list tbody:first-child > tr + tr + tr {border-top: 1px solid #ccc;} #list > tbody:first-child tr td.col1 {padding-top: 20px;} .mobileColumnName {display: inline-block; padding-bottom: 4px; width: 40%; box-sizing: border-box;} .mobileColumnName + input, .mobileColumnName + textarea, .mobileColumnName + select, .mobileColumnName + .radio-container, .mobileColumnName + .checkbox-container, .mobileColumnName + .dateContainer {width: 60%; display: inline-block; box-sizing: border-box; vertical-align:top; box-shadow:none;} .buttonsColumn {text-align: right;}

    Here's how it would look like:

    15975874912516032 2 Screenshot 21

  • dscott001
    Replied on August 16, 2020 at 9:15 PM

    I think you should read my concern more carefully. Seems like you guys only have 1 solution and this is the  same script that's been published several times in this forum. I said I am REMOVING and customizing the columns, but the result is the remaining columns doesn't stretch the width of the form. I didn't ask to remove a scrollbar...neither did I ask to change the format to be vertical instead of horizontal...I wanted to keep it vertical but maximize the width of the form and then have the ability to adjust % of width each column would  take with a min-width to ensure its still readable. 

  • Girish JotForm Support
    Replied on August 17, 2020 at 1:24 AM

    If there are more columns, then either you should increase the form width or change the layout to vertical so that the widget fields appear correctly.

    I checked your form https://form.jotform.com/202271317931045. Are you referring to the field below in this form?

    15976415121708 13 Screenshot 10 

    If yes, I can see that you've set up the fields to be shown vertically:

    15976415721708 14 Screenshot 21

    Since you have just three fields, even if you show the fields horizontally, it will cover the full width of the form.

    Please review and let us know how you want to configure this field.