2012-08-22 13 views
11

हैलो जानना चाहते हैं कि मुझे इस पर कुछ मदद मिल सकती है क्योंकि मुझे नेट पर कुछ भी नहीं मिला है जो इस समस्या को ठीक करेगा, आईफोन पर ट्विटर पर बड़े बूटस्ट्रैप मोडल बॉक्स बॉक्स के पाद लेख को पाने के लिए कोई स्क्रॉल नहीं है।आईफोन पर मॉडल बॉक्स कोई स्क्रॉल नहीं

कोड का इस्तेमाल किया

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

उत्तर

20

फिक्स निम्नलिखित सीएसएस (बूटस्ट्रैप 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}} 
+1

मेरे लिए केवल आंशिक फिक्स के रूप में काम किया। फॉर्म अब स्क्रॉल करने योग्य है, लेकिन केवल पहले शो पर। एक बार जब मैं इसे एक बार स्क्रॉल करता हूं या अंदर किसी भी फॉर्म ऑब्जेक्ट्स में हेरफेर करने की कोशिश करता हूं, तो पूरी चीज फिर से टूट जाती है। हे। शेयर के लिए धन्यवाद! – Kirill

+0

इसने मेरी विशेष समस्या का समाधान नहीं किया लेकिन मेरी मदद की। धन्यवाद! – kiev

+0

@ किरील के समान, यह मेरे लिए _almost_ है! यह शुरुआत में काम करता है, लेकिन जब मैं ड्रॉप डाउन सूची (जो आईफोन पूरी तरह बर्बाद हो जाता है) से कोई मान चुनने का प्रयास करता है, तो बग रिटर्न देता है। मुझे लगता है कि वे पेज तत्वों को इस तरह से संशोधित कर रहे हैं कि इस सीएसएस फिक्स को उलट देता है :( –

0

मैं माता पिता div करने के लिए एक max-height सीएसएस संपत्ति दे रही है विश्वास (आईडी: electricityModal) की मदद और एक स्क्रॉल पट्टी दे सकता है। एक ऊंचाई चुनें जो आपको उपयुक्त बनाती है। 250px की तरह कुछ कहो। इस के लिए

+1

की कोशिश की है कि साथ बहुत अधिक कर एक समाधान मिल जाने खोज करने के बाद काम नहीं किया जोड़ रहा है। –

संबंधित मुद्दे