Remove scrollbars on lightbox

  • Profile Image
    modtest
    Asked 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>
  • Profile Image
    jefreylandicho
    Answered 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
    modtest
    Answered 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
    pinoytech
    Answered 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
    modtest
    Answered on June 24, 2013 at 01:29 PM

    Hi pinoytech,

     

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

  • Profile Image
    sidharth_kch
    Answered 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
    modtest
    Answered 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
    Welvin
    Answered 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
    Welvin
    Answered on June 25, 2013 at 11:39 AM

    The result should be:

     

    Thanks