Twitter bootstrap modular issues

Question

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

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

This works fine, however, if you squeeze your window, it will cause 50% of the modal screen, so you won’t be able to see half the modal rendering, which is useless at these small resolutions. Around the resolution of the iPad, you can see how this happens.

Now, if you set the modality width in the main bootstrap.css file, then only one width works fine. Therefore, if I set the width to 400 and margin-left -200, all modals will work with this width. But if I go ahead and make inline CSS modal and, for example, follow these steps:

width: 900 pixels margin-left: -450px

It will break at lower resolutions, as described above.

What am I doing wrong? Does Twitter Bootstrap only use the ability to use one modular width in all resolutions?

I would include screenshots, however the admins in StackOverflow apparently don't let me post them to help you guys.

Here is an example of one of the modals that will break at lower resolutions due to the fact that it makes 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> 

Near the resolution of the iPad, 50% of the modal screen is disconnected from the screen to the left.

Answer 1

You can use jQuery to select modals of interest and edit their CSS attributes. Using the following, set the modal value to 90% of the screen width and place it in the 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 will work when the page loads. Resize the browser and refresh the page, and the modal should be centered on the screen, occupying 90% of the screen width.