The widget does not automatically adjust the remaining columns

  • Profile Image
    dscott001
    Asked on August 16, 2020 at 09: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?



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

  • Profile Image
    JohnRex
    Answered 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.

    15975873172516032.png

    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.png

  • Profile Image
    dscott001
    Answered on August 16, 2020 at 09: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. 

  • Profile Image
    gerardw
    Answered on August 17, 2020 at 01: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.png 

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

    15976415721708_14.png

    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.