How to make Lightbox embed code mobile responsive

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..

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. 

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

@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.

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? 

@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. 

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.

Great to hear! Thank you!