15

Hello want to know if i can get some help on this as i have not found anything on the net that will fix this issue, On the iphone the twitter bootstrap modal box when is to big the page has no scroll to get the the footer of the box.

code used

    <div class="modal hide" id="electricityModal">

        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3>Submit A Electricity Reading</h3>
        </div>

        <div class="modal-body">

            <div class="control-group">
                <label class="control-label">Date/Time</label>
                    <div class="controls">
                        <span class="input-medium uneditable-input">22 Aug 2012, 9:45AM</span>
                    </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="reading-peak">Peak</label>
                <div class="controls">
                    <input style="letter-spacing: 10px;" type="text" id="reading-peak" class="input-medium">
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="reading-off-peak">Off Peak</label>
                <div class="controls">
                    <input style="letter-spacing: 10px;" type="text" id="reading-off-peak" class="input-medium">
                </div>
            </div>

        </div>

        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <button class="btn btn-primary">Lodge Reading</button>
        </div>
    </div>
Ionică Bizău
  • 109,027
  • 88
  • 289
  • 474
Chris R
  • 1,263
  • 2
  • 10
  • 14

2 Answers2

23

Fix for this is adding the following css (found on bootstraps github issues)

    @media (max-width: 480px) {

        .modal {
            height: 500px; /* Set a default max height of the modal (adjusted later)*/
            position: fixed; /* Display modal in the centre of your screen */
            overflow-y: scroll; /*  Ensure that the modal is scroll-able */
            -webkit-overflow-scrolling: touch; /* Avoid having to use 2 finger scroll on iOS    */
        }
        .modal.fade.in{
            top: 5px; /* Use more screen real estate */
        }
        .modal-body{
            /* Increase the max height of the modal body to try & avoid both it,
             * and the modal container having scroll bars which results in odd behavior */ 
            max-height: 2400px; 
        }   
    }

    /* Now adjust the height so it handles various screen sizes & orientations */
    /* You could make this as granular as you like, or have it more granular at common screen sizes
     * but it should start at the height we set on .modal (i.e. 500px) & work down */
    @media (max-width: 480px) and (max-height: 500px){.modal{ height: 450px}}
    @media (max-width: 480px) and (max-height: 450px){.modal{ height: 400px}}
    @media (max-width: 480px) and (max-height: 400px){.modal{ height: 350px}}
    @media (max-width: 480px) and (max-height: 350px){.modal{ height: 300px}}
    @media (max-width: 480px) and (max-height: 300px){.modal{ height: 250px}}
    @media (max-width: 480px) and (max-height: 250px){.modal{ height: 200px}}
    @media (max-width: 480px) and (max-height: 200px){.modal{ height: 150px}}
Chris R
  • 1,263
  • 2
  • 10
  • 14
  • 1
    For me only worked as a partial fix. The form is now scrollable, but only on the first show. Once I scroll it once or try to manipulate any form objects inside, the whole thing breaks again. Heh. Thanks for the share tho! – Kirill Nov 15 '12 at 18:25
  • this didnt solve my particular problem but helped me. Thanks! – kiev Jul 18 '14 at 20:25
  • Similar to @Kirill, this is an _almost_ for me! It works initially, but when I attempt to select a value from a drop down list (which iPhone completely ruins), the bug returns. I assume they're modifying the page elements in a way that reverts this css fix :( – Vinney Kelly May 27 '16 at 19:59
0

I believe giving a max-height css property to the parent div (id:electricityModal) might help and give a scroll bar. Choose a height that best suits you. Say something like 250px.

Devin
  • 1,755
  • 1
  • 19
  • 27