Search code examples
csstwitter-bootstrapmodal-dialog

Bootstrap Modal doesn't fit screen

I actually work on a project of a website which is supposed to fit on iOS and Android. Then, there's my problem:

In iOS/Android resolution: I have a button that opens a modal, inside a window that contains a table which is larger than the resolution. This table goes out from the page, but that's normal, and that's what I want. That button, when I click, successfully opens the modal, but this modal doesn't fit on the visible screen: it fit on the whole page and so, it's not fully visible.

What I want would be the modal to fit the screen size. And not being masked on the part of the window we have to scroll to view. That should be possible and realistic, but I tried a lot without any success.

I send u some screenshots to make you see my problem more clearly:

1/ The window with the button: "Launch Demo Modal" first example

2/ The window when I click the button and the modal appears second example

My problem is located on the second picture. I wish the modal to fit the screen.

The code:

    <!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>
 
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

I truly thank you for any answers,

Solution

  • You need to add this media query.

     @media (max-width: @screen-xs-min) {
  .modal-xs { width: @modal-sm; }
 }