Scroll bars displayed in table

  • paddling
    Asked on September 30, 2020 at 11:10 AM

    I am seeing 2 scroll bars on a very small input table.

    I tried changing the table width and column width but can't seem to get the scroll bars to go away.

    Jotform Thread 2607060 Screenshot
    Page URL: https://www.jotform.com/paddling/gearGuideCost
  • enterprisesupportteam
    Replied on September 30, 2020 at 3:51 PM

    Hello @paddling,

    We do apologize for the inconvenience that you have experienced.

    After checking your form, I was able to see the issue that you are mentioning. It seems that the Input Tabel field has scroll bars appearing underneath it. This issue is in relation to the overflow of the table block, not the width of the table itself.

    To resolve this, you can insert the following CSS code to set the overflow style of the table field to 'auto' which will reset and remove the scroll bars.

    li[data-type="control_matrix"], li[data-type="control_matrix"] .form-input-wide {

       overflow-x: auto !important;

    }

    Please give this a try and let us know if you require further assistance.

  • Brian
    Replied on October 1, 2020 at 11:24 AM

    That worked great, just took me a minute to figure out where to add the CSS.

    Form Designer (paint roller icon)

    Styles

    Inject Custom CSS

  • enterprisesupportteam
    Replied on October 1, 2020 at 11:40 AM

    Hey Brian,

    Good to know the CSS code worked for you.

    Also, my apologies for not mentioning where to inject the CSS. We actually have a very helpful user guide that can help you with that and I forgot to include it in my response. I will link it for you here below for future reference.

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Please let us know if you have any further questions or concerns, we are always happy to help.