How can I remove the horizontal scroll bar?

  • Profile Image
    Gabstz
    Asked on May 09, 2015 at 03:52 AM

    It's embedded as a Feedback button. It says "Clase Gratis" on my web page.

     

     

     

  • Profile Image
    Boris
    Answered on May 09, 2015 at 04:27 AM

    Hello Gabstz.

    I have taken a look at your website, and it looks like it is an issue on the page of your website, not of the embedded JotForm.

    Please remove the width declaration from the element #js-form-content on your site, and the form should display properly, without a horizontal scrollbar.

     

    Please let us know how it goes. Please don't hesitate to ask if you need any help with your form, we will be glad to assist.

    With kind regards,
    Boris

  • Profile Image
    Gabstz
    Answered on May 09, 2015 at 12:24 PM

    It works, but I can´t edit that line if it is not active, I use Adobe Muse as my web page maker, and sometimes I use Dreamweaver to edit html code. But I can´t find that line inside of my html code.

    Do you know why?

     

     

    But that line isn't anywhere in my html code.

     

  • Profile Image
    Boris
    Answered on May 09, 2015 at 05:06 PM

    Please accept my apology - my explanation was vague, I am sorry. I'll try to explain what is happening in a clearer way, as well as how to fix it.

    The horizontal scrollbar is appearing because both the form inside the iframe, as well as the container of the iframe, are both set to the same width (700px). This is actually something that is caused by our feedback embed script, but you would need to fix it on your website's side.

    So the outside of the iframe has width of 700px.

    Form inside the iframe has 700px, but it also has a vertical scrollbar so you can navigate from top to bottom. So inside the iframe, width is actually 700px+vertical scrollbar, which makes it wider than its container, and a horizontal scrollbar appears on the container.

    Now, in order to fix this, all you would need to do is to add a single line of CSS to one of your websites stylesheets - not to the JotForm form.

    #js-form-content { width: auto !important; max-width: 750px; }

    This will reset the width of the container that is outside the iframe, and everything should display properly. Setting max-width here is not mandatory, but I have added it just in case.

    Please add the above code to one of your stylesheets, hard-reload your page (Ctrl+F5), and you should see your form appear with no horizontal scrollbar from now on.

    Please let us know how it goes, or if you need any further help, and we will be very glad to help you out as much as we can.

  • Profile Image
    Gabstz
    Answered on May 09, 2015 at 06:09 PM

    Don't worry, you always do your the best!

    This code finally worked. i have fixed the form.

    #js-form-content

     { 

     width: auto !important; 

     max-width: 750px; 

     }

     

    THANKS A LOT!

     

  • Profile Image
    raul
    Answered on May 09, 2015 at 06:14 PM

    On behalf of my colleague, you're welcome.
    We're glad to see that you were able to find a working CSS code.

    If you need further assistance, please let us know.