How to control div height on iPad

Question

I have a hidden div element which appears when a button is clicked.

I set the div width and height in css:

.booking-inner-popup {
    width: 80%;
    height: 90vh;
    background-color: #fff;
    position: relative;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 40px auto;
    border-radius: 0;
}

I use jQuery to set the width and height relative to the browser viewport using:

jQuery(document).ready(function(){
    var windowHeight = jQuery(window).height();
    jQuery('#BookingFrame').css('height', windowHeight * 0.9 | 0);

    jQuery( window ).resize(function() {
        var windowHeight = jQuery(window).height();
        jQuery('#BookingFrame').css('height', windowHeight * 0.9 | 0);

    });

});

This works fine in browser and on Android (In that it provides scrollbars for content out of view) BUT it does not work on Apple devices (no scrollbars).

When viewing on an iPad - the height extends well past the bottom of the screen which cuts off the bottom of the form, including the submit button and restricts anyone from using the form.

I have googled and tried a few solutions but none of them work. Any ideas?

UPDATE

I applied the settings as outlined in links provide to working versions:

Changed the jQuery to resize the wrapper-div
Added scrolling to wrapper div
Set iframe height=100% and scrolling="no"

https://jsfiddle.net/oleymedia/f4L6skmy/

Does not work.

Desktop: The iframe sets its height to 100% of the div height iPad: Still no scrolling

score 0 · Answer 1 · answered Oct 24 '18 at 01:59

0

iFrames on mobile Safari always stretch to fit all available content. You should look this question here: IFrame height issues on iOS (mobile safari) - But wrapping your iframe on a div and setting the height constraint on that div should work.

answered Oct 24 '18 at 01:59

Raphael Aleixo

597
6
18

He not mentioned that he used iFrame. – Hanif Oct 24 '18 at 02:01
1

I noticed that by going to the link he provided. Sorry, I didn't explained that. – Raphael Aleixo Oct 24 '18 at 02:03
He has an iframe inside the modal. – Jerdine Sabio Oct 24 '18 at 02:10
@RaphaelAleixo the css in the OP is the div that wraps the iframe which has a height of 90vh – php-b-grader Oct 24 '18 at 02:43
Yes, I understood that. But in the mobile safari, you won't be able to set the iframe height. You could add another wrapping div, with `overflow-y:scroll`. The link I posted above is explaining this issue. – Raphael Aleixo Oct 24 '18 at 02:55
Did that - still not working - and it breaks the desktop as well – php-b-grader Oct 24 '18 at 03:41
You don't need to set the div height with javascript/jquery. You should set the iframe height to be equal as its document size. If your iFrame source is on the same domain as your page, you try something like: $(document).ready(function(){ $('#BookingFrame').load(function(){ $(this).height($(this).contents().find('body').height()) }) }); – Raphael Aleixo Oct 24 '18 at 11:08

How to control div height on iPad

1 Answers1