How to make Lightbox embed code mobile responsive

  • Profile Image
    goshow
    Asked on January 25, 2016 at 01:03 PM
    So we are now end of Jan 2016, any news on this update? Really a show-stopper for me having to spend hours trying to get the form working responsively in lightbox..
  • Profile Image
    Charlie
    Answered on January 25, 2016 at 01:29 PM

    Unfortunately, the lightbox is still not yet mobile responsive.

    However, we do have a workaround that might make it mobile friendly at first load. But is not 100% mobile responsive. 

    You can check the custom script on this thread that I have suggested to another user: https://www.jotform.com/answers/686728.

    Here's how you can implement the workaround in your end:

    1. First, get you lightbox embed code and paste it in your text editor.

    Here's mine:

        <script src="https://form.jotform.com/static/feedback2.js?3.3.REV" type="text/javascript">

          var JFL_60244871950962 = new JotformFeedback({

            formId: '60244871950962',

            base: 'https://form.jotform.com/',

            windowTitle: 'Lightbox Embed Code - Mobile Responsive',

            background: '#FFA500',

            fontColor: '#FFFFFF',

            type: 'false',

            height: 500,

            width: 700,

            openOnLoad: false

          });

        </script>

          <a class="btn lightbox-60244871950962" style="margin-top: 16px">

            Lightbox Embed Code - Mobile Responsive

          </a>

     

    2. We will then need to add some custom code inside the script tags. You can check my final code here: http://pastebin.com/v2151BJJ. Here's my final script:

    <script src="https://form.jotform.com/static/feedback2.js?3.3.REV" type="text/javascript">    

        // get current width of the window

        var parentWidth = window.innerWidth;

        var parentHeight;

     

        // check if the window size is less than 499, assuming that it means it is viewed on a mobile device

        if(window.innerWidth <= 499) {

        parentWidth = window.innerWidth; // if it's in mobile view assign the current width to this variable

            parentHeight = window.innerHeight - (window.innerHeight * 0.1);

        } else {

        parentWidth =  700; // if it's viewed on a window larger thatn 499px then set the width to 500px

            parentHeight = 500;

        }

          var JFL_60244871950962 = new JotformFeedback({

            formId: '60244871950962',

            base: 'https://form.jotform.com/',

            windowTitle: 'Lightbox Embed Code - Mobile Responsive',

            background: '#FFA500',

            fontColor: '#FFFFFF',

            type: 'false',

            height: parentHeight,

            width: parentWidth,

            openOnLoad: false

          });

        </script>

          <a class="btn lightbox-60244871950962" style="margin-top: 16px">

            Lightbox Embed Code - Mobile Responsive

          </a>

     

     

    3. The ones highlighted in yellow above are the custom code that we have. Noticed that I have added comments on each part to better understand them. What the code actually does is that it checks the width and the height of the parent element, then it replaces the width and the height of the lightbox based from the parent element, in that way the lightbox would match the actual display screen. Just copy the yellow codes and paste them in your lightbox embed code.

     

    4. You can check my test website here: https://shots.jotform.com/charlie/lightbox_mobile_responsive_2.html. This is how it looks like in my Android phone:

     

     

    I have also forwarded this to our developers so that they are aware that you are also looking for this functionality or feature. Apologies for the inconvenience. 

  • Profile Image
    zabavaconsulting
    Answered on February 29, 2016 at 10:02 PM

    This worked! Unfortunately I had to search forever to find the solution!

  • Profile Image
    Charlie
    Answered on March 01, 2016 at 01:12 AM

    @zabavaconsulting

    I'm glad to hear that it worked. I'm sorry to hear that it took quite some time to find this workaround. You can always open a new thread here in the forum and we'll answer your questions as immediate as possible. Thank you.

  • Profile Image
    Berrymisu
    Answered on July 04, 2016 at 03:25 AM

    Are we supposed to insert our own data where you have written "get current width..." or do we justs copy the whole thing even with your explanations and paste it in? 

  • Profile Image
    Welvin
    Answered on July 04, 2016 at 08:40 AM

    @Berrymisu: Yes, copy the whole custom script. Just follow the steps in my colleague's reply. If you need a help, please create a new thread. 

  • Profile Image
    Scott
    Answered on February 24, 2017 at 06:18 AM

    Hey goshow, zabavaconsulting and Berrymisu,

    Our UI developers fixed this situation, where the lightbox embedded forms were not responsive.

    You do not need any workarounds anymore. And also, since the lightbox embed code's updated through fetched JS files, you do not need to re-embed anything again. It should just work as responsive, still when you delete the workaround CSS codes.

    We will be still waiting for your response and feedback,

    Cheers.

  • Profile Image
    zabavaconsulting
    Answered on February 24, 2017 at 11:40 AM

    Great to hear! Thank you!