How can I change the width of a Bootstrap 3 modal in IE8?

Question

I have to support IE8. The modal itself works fine, but my attempts to resize it (which work fine in Firefox) don't work in IE8.

I'm just adding a class (wide-modal in this example) to the modal-dialog div (the 2nd nested one in the Bootstrap structure) and applying a width via CSS, nothing fancy.

HTML:

       <div class="modal fade" id="modalTest" role="dialog">             <div class="modal-dialog wide-modal">               <div class="modal-content ">                 <div class="modal-header">                   <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>                   <h4 class="modal-title">Testing Modal</h4>                 </div>                 <div class="modal-body">                   <img src="content/Example-Infographic.jpg" width="100%" />                 </div>                 <div class="modal-footer">                   <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>                 </div>               </div><!-- /.modal-content -->             </div><!-- /.modal-dialog -->         </div> 

CSS:

.wide-modal {     width: 60%; } 

I tried adding the class to the div above and below to no (positive) effect. It works like a charm where it is in Firefox, just no effect at all in IE8. I also tried with a px width, no difference. I do have the respond.js library in place so in general IE8 is behaving other than this.

Answer 1

In bootstrap 3 you need assign width not to .modal class but to .modal-dialog

#modalTest .modal-dialog {     width: 500px; /* your width */ } 

Answer 2

I used a combination of CSS and jQuery, along with hints on this page, to create a fluid width and height using Bootstrap 3. I also tested this on IE8 on Win7, and it works great.

First, some CSS to handle the width and optional scrollbar for the content area

.modal.modal-wide .modal-dialog {   width: 90%; } .modal-wide .modal-body {   overflow-y: auto; } 

And then some jQuery to adjust the height of the content area if needed

$(".modal-wide").on("show.bs.modal", function() {   var height = $(window).height() - 200;   $(this).find(".modal-body").css("max-height", height); }); 

Full write-up and code at http://scottpdawson.com/development/creating-a-variable-width-modal-dialog-using-bootstrap-3/