CODEWITHSUNDEEP
twitter-bootstrapmodal-dialog
trainoasis
trainoasis

Reputation: 6720

Twitter bootstrap: modal on mobile phones

I'm trying to figure out why I can't seem to click on anything inside the modal when it comes up (on a mobile device that is - it works OK in a pc browser). I have a code like this which is a basic modal from twitter bootstrap:

<!-- Modal -->

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria hidden="true">×</button>
      <h3 id="myModalLabel">choose!</h3>
    </div>
    <div class="modal-body">
      <div class="row-fluid">
       <form>
         <fieldset>
             <select class="input-large">
             <option value="0">10:15</option>
             <option value="1">12:45</option>
             <option value="2">13:15</option>
            </select>
         </fieldset>
       </form>
     </div>
   </div>
   <div class="modal-footer">
      <button class="btn pull-left" data-dismiss="modal" aria-hidden="true">Close</button>
      <button class="btn btn-primary">Save changes</button>
   </div>
</div> <!-- modal END -->

And this modal is opened by javascript event. It opens well enough, but on my phone I can't click (or i miss all the time?) the buttons or hit the select field. Any thoughts on that?

Thanks for any help.

Upvotes: 3

Views: 14004

Answers (2)

fustaki
fustaki

Reputation: 1614

I had the same problem. It is caused by the inclusion of bootstrap-responsive.css (v2.0.3 in my case) and it affects both the proper display of the modal and its edition when you tap the input field and the keyword pops-up. I slightly modified the patch presented in this StackOverflow question with this:

.modal { 
    position: fixed; 
    top: 20px !important; 
    right: 3%; 
    left: 3%;
    width: auto; 
    margin: 0; 
}

in both @media (max-width: 480px) and @media (max-width: 767px) media queries and it seems to work fine.

Upvotes: 3

trainoasis
trainoasis

Reputation: 6720

Found a solution..if anyone will have the same issue. Just added 'active' class to the modal and it's working ok now.

class="modal hide fade active"

Upvotes: 3

Related Questions