Modalne pudełko na iPhonie bez przewijania

Question

Witam chcę wiedzieć, czy mogę uzyskać pomoc w tej sprawie, ponieważ nie znalazłem niczego w sieci, która rozwiąże ten problem, Na iPhone'a modemu modemu twitter twitter, gdy jest duża strona nie ma przewijania, aby uzyskać stopkę pudełka.

kod

wykorzystywane

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

Answer 1

Fix do tego dodaje następujące css (znajdujący się na kwestiach bootstraps GitHub)

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

Answer 2

wierzę dając własności max-height CSS div nadrzędnej (ID: electricityModal) może pomóc i dać pasek przewijania. Wybierz wysokość, która najbardziej Ci odpowiada. Powiedz coś w stylu 250px.