Css – Twitter Bootstrap Modal Width issues

cssmodal-dialogtwitter-bootstrap

My application features many modals, all with different widths. I understand you can set the width of a modal inline by doing something like:

width: 400px
margin-left: -200px;

This works great, however if you compress your window in it'll kick the modal 50% of the screen, so you cannot see half of the modal rendering it useless at these small resolutions. At about the resolution of an iPad you can see this happen.

Now on to the issue, if in the main bootstrap.css file you set the width of the modal, only that one width works perfect. So if I set the width as 400 and margin-left -200, all modals will work at this width. But if I go ahead and do inline CSS on a modal and do for instance:

width: 900px
margin-left: -450px

It'll break at lower resolutions as described above.

What am I doing wrong? Does Twitter Bootstrap only offer the ability to make one modal width work at all resolutions?

I'd include screenshots, however the admins at StackOverflow apparently don't allow me to post these to help you guys.

Here's an example of one of the modals that will break at a lower resolutions because of doing the width inline:

<div id="add-edit-project-modal" class="modal hide fade" style="width: 320px; margin-left: -160px;">
  <div class="add-edit-project-modal-header modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h4 class="modal-title">New Project</h4>
 </div>
 <div class="add-edit-project-modal-body modal-body">
    <form action="" id="add_project">
    <label>Name</label>
  </div>
  <div class="add-edit-project-modal-footer modal-footer">
    <input type="submit" id="submitButton" class="btn submit" value="Create">
    </form>
  </div>
</div>

At about the resolution of an iPad, 50% of the modal is off the screen to the left.

Best Answer

You could use jQuery to select the modal(s) in question and edit their CSS attributes. Using the following would set the modal to 90% of screen width and position it center of the screen:

$('#myModal').modal({
            backdrop: true,
            keyboard: true,
            show: false
        }).css({
            // make width 90% of screen
           'width': function () { 
               return ($(document).width() * .9) + 'px';  
           },
            // center model
           'margin-left': function () { 
               return -($(this).width() / 2); 
           }
    });

This would work when the page loads. Resize you browser and refresh the page and the modal should be centered in the screen taking up 90% of screen width.

Related Topic