What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Remove scrollbars on lightbox

    Asked by modtest on June 24, 2013 at 12:44 PM

    This works fine on a big a screen but on a smaller screen the lightbox shows scrollbars.

    Is there a way to have it so it never has scrollbars and is able to fit to different size screens.

     

    Thank you for your help :)

     

    <script src="https://jotform.ca/min/g=feedback2" type="text/javascript">  new JotformFeedback({  formId:'30275547730252', base:'https://jotform.ca/', windowTitle:'Order Form', background:'#FFA500', fontColor:'#FFFFFF', type:1, height:500, width:700 }); </script> <a class="lightbox-30275547730252" style="cursor:pointer;color:blue;text-decoration:underline;"><img onmouseout="this.src='img/1.png'" onmouseover="this.src='img/2.png'" src="img/1.png" /></a><br /> <a class="lightbox-30275547730252" style="cursor:pointer;color:blue;text-decoration:underline;"><img src="img/3.png" /></a>
    JotForm order form style size
  • Profile Image

    Answered by jefreylandicho on June 24, 2013 at 12:54 PM

    Please add this code at the top of your lightbox code or in the before the </head> tag in your website to remove the scrollbar.

    <style>

    .jt-content {overflow:hidden !important;}

    </style>

    If you need further assistance, please contact us again.

  • Profile Image

    Answered by modtest on June 24, 2013 at 01:11 PM

    This code remove the scrollbars but doesnt shrink the box so the entire form fits in the lightbox

  • Profile Image

    Answered by pinoytech on June 24, 2013 at 01:26 PM

    Hi,

    Can you please share to us URL of your website where your form embedded for further assistance?

    Thank you!

  • Profile Image

    Answered by modtest on June 24, 2013 at 01:29 PM

    Hi pinoytech,

     

    I dont have it hosted anywhere online just using notepad++

  • Profile Image

    Answered by sidharth_kch on June 24, 2013 at 02:34 PM

    @modest

    You should change the spacing between labels. Please refer the following guides for  more information: 

    Field positioning

    How-can-I-change-spacing-between-questions

    Let us know if you need further assistance.

    Thanks,

    Sidharth

  • Profile Image

    Answered by modtest on June 25, 2013 at 10:55 AM

    If you see the two cloned forms below, one has additional address field, adding this field causes there to be a horizontal scrollbar to be added for no reason?

    How do I prevent the horizonal bar from showing as the vertical one is required to view the whole form?

     

    Is there an option where the box automatically shrinks the contents to fit into different size screens? (therefore require no scrollbars ever)

     

    <head>

    <script src="//cdn.jotfor.ms/static/feedback2.js?3.1.907" type="text/javascript">
    new JotformFeedback({
    formId:'31753968302963',
    base:'http://jotformpro.com/',
    windowTitle:'Order Form',
    background:'#0000FF',
    fontColor:'#FFFFFF',
    type:1,
    height:500,
    width:700
    });
    </script>
    <a class="lightbox-31753968302963" style="cursor:pointer;color:blue;text-decoration:underline;">Form with no scrollbars</a>

    <br/>
    <br/>

    <script src="//cdn.jotfor.ms/static/feedback2.js?3.1.907" type="text/javascript">
    new JotformFeedback({
    formId:'31754522505955',
    base:'http://jotformpro.com/',
    windowTitle:'Order Form',
    background:'#0000FF',
    fontColor:'#FFFFFF',
    type:1,
    height:500,
    width:700
    });
    </script>
    <a class="lightbox-31754522505955" style="cursor:pointer;color:blue;text-decoration:underline;">Form with scrollbars .net</a>

    </head>

  • Profile Image
    JotForm Support

    Answered by Welvin on June 25, 2013 at 11:36 AM

    Hi,

    You should be able to remove the scrollbar if you will follow my colleague suggestion to add the CSS Properties together with the lightbox codes as follows:

    <style type="text/css">

    div.jt-content{

    overflow-x: hidden !important;

    }

    </style>

    <script src="//cdn.jotfor.ms/static/feedback2.js?3.1.907" type="text/javascript">

    new JotformFeedback({

    formId:'31754522505955',

    base:'http://jotformpro.com/',

    windowTitle:'Order Form',

    background:'#0000FF',

    fontColor:'#FFFFFF',

    type:1,

    height:500,

    width:700

    });

    </script>

    <a class="lightbox-31754522505955" style="cursor:pointer;color:blue;text-decoration:underline; ">Form with scrollbars .net</a>

    Copy this codes and save as HTML file then view in your browser.

     

    Thanks

  • Profile Image
    JotForm Support

    Answered by Welvin on June 25, 2013 at 11:39 AM

    The result should be:

     

    Thanks