Set modal width? #675

Closed
dmackerman opened this Issue Nov 22, 2011 · 56 comments

Projects

None yet
@dmackerman

Is there a way to set the modals width and have it center properly? I'm trying to make a rather large modal in terms of width, like around 950px. I'm creating it dynamically like so:

    var userSettingsModal = $('<div />', { class: 'modal fade', id: 'user-settings-modal', style: 'width: 950px;' })
        .append($('<div />', { class: 'modal-header' })
            .append($('<a/>', { class: 'close', text: 'x', href: '#' } ))
            .append($('<h3/>', { text: 'Edit User' })))
        .append($('<div />', { class: 'modal-body'} ));

        userSettingsModal.modal({
            backdrop: true
        });

However, it's not centered. Anyway to accomplish this?

@trojkat
trojkat commented Nov 25, 2011

Same here. I need wider modal window :-(

@envex
envex commented Nov 25, 2011

Why would you need a modal window that's that big.

I think you may be defeating the purpose of a modal window.

@dmackerman

@envex 500px wide isn't that wide. I need to put several form fields inside it, and it's looking a bit smushed. I don't think having a modal that covers a larger portion of the screen is defeating the purpose of a modal.

@paramah
paramah commented Nov 30, 2011

I have something like this:
.modal {width:940px;left:36%;}

@trojkat
trojkat commented Nov 30, 2011

Left value must be calculated dynamically during opening of modal window, depending on the width.

@brennanmceachran

margin-left of the modal should be -(widthOfModal / 2)

so... say:

.bigModal{
   width:940px;
   margin-left:-470px;
}
@paramah
paramah commented Dec 1, 2011

nice one :)

@fat
Member
fat commented Dec 3, 2011

yep - you just have to set the css.

@fat fat closed this Dec 3, 2011
@trojkat
trojkat commented Dec 21, 2011

IMHO JS should dynamically calculate the left margin when you open modal window, depending on its width.

@dmackerman

I agree with @trojkat.

@fat
Member
fat commented Dec 21, 2011

we're trying to not set any styles in css unless absolutely necessary. In this case it isn't.

@rviscomi

With respect to the issue being closed, I'd just like to contribute a workaround that I've found to be nifty and reusable for shrinkwrapped modals:

    $('#feedback-modal').modal({
        backdrop: true,
        keyboard: true
    }).css({
        width: 'auto',
        'margin-left': function () {
            return -($(this).width() / 2);
        }
    });

Thanks to @brennanmceachran for the formula and @trojkat for the idea.

@EricWarnke

@rviscomi Excellent solution, cheers :)

@openwater77

@rviscomi Thanks!

@mewdriller

@rviscomi Thanks for the nice clean solution!

@gimenete

@rviscomi thanks!

@davidchua

@rviscomi that's perfect! Thanks!

@mark47
mark47 commented Jun 5, 2012

@rviscomi - excellent!

@MindWire
MindWire commented Jun 7, 2012

@rviscomi great stuff. To add to that I would suggest doing the following as it dynamically sets the width to 90% (.9) of the documents width at the time its loaded for those who need it. You could also include max-width and min-width if you wanted even more control.

$('#feedback-modal').modal({
        backdrop: true,
        keyboard: true
    }).css({
       'width': function () { 
           return ($(document).width() * .9) + 'px';  
       },
       'margin-left': function () { 
           return -($(this).width() / 2); 
       }
});
@ghost
ghost commented Jun 26, 2012

@rviscomi Excellent, thanks so much!

@lilred
lilred commented Jul 2, 2012

Hey guys! I'm new to jQuery, why does using @rviscomi's or @MindWire's code open the modal when the page is loaded? And how do I hide it by default? Thanks!

@mark47
mark47 commented Jul 2, 2012

Hey @lilred - you can do this with the basic Bootstrap functionality. Set show to 'false. For example:

$('#myModal').modal({
show: false
});

See the Bootstrap site for details:
http://twitter.github.com/bootstrap/javascript.html#modals

@lilred
lilred commented Jul 2, 2012

Thank you kind sir :) And props to everyone who contributed to this solution, it's a thing of beauty.

@Jean-lucLanglois

sweet! perfect solution

@axpence
axpence commented Aug 21, 2012

How do you set an iframe width within the modal to be the same width as the new bigger width of the bigModal?
Here's my CSS:

.bigModal{
width:940px;
margin-left:-470px;
}

HTML:


<iframe src="http://www.drudgereport.com" width="600"></iframe>
@MindWire

You would use a separate class for the iframe like this:

.full-iframe {
width:100%;
border:none;
}

Your modal would look something like this:

    <div class="modal hide fade">
        <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
           <h3>Modal header</h3>
        </div>
        <div class="modal-body">
            <iframe class="full-iframe" src="http://www.wikipedia.com">
        </div>
        <div class="modal-footer">
            <a href="#" class="btn">Close</a>
            <a href="#" class="btn btn-primary">Save changes</a>
        </div>
    </div>

This will set the width to full size, but the height will be relatively small. You can always add a height: 500px; to the above class to make the iframe viewport more usable.

@axpence
axpence commented Aug 21, 2012

Thanks for the reply, I appreciate it. I tried to do the class you
mentioned, but I can't get it to work. Here is the example I am working on:

http://snowbird.camorada.com/modaltest.html

On Tue, Aug 21, 2012 at 8:30 AM, MindWire notifications@github.com wrote:

You would use a separate class for the iframe like this:

.full-iframe {width:100%;border:none;}

Your modal would look something like this:

<div class="modal hide fade">
    <div class="modal-header">
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
       <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <iframe class="full-iframe" src="http://www.wikipedia.com">
    </div>
    <div class="modal-footer">
        <a href="#" class="btn">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>

This will set the width to full size, but the height will be relatively
small. You can always add a height: 500px; to the above class to make the
iframe viewport more usable.


Reply to this email directly or view it on GitHubhttps://github.com/twitter/bootstrap/issues/675#issuecomment-7902737.

@MindWire

You are missing the equals sign after your class attribute in your sample link, current: class"full-iframe" class="full-iframe". Simply add the equals sign and you are good to go.

@axpence
axpence commented Aug 21, 2012

Good catch! Thank you!!!!! I appreciate it!!!

On Tue, Aug 21, 2012 at 11:13 AM, MindWire notifications@github.com wrote:

You are missing the equals sign after your class attribute in your sample
link, current: class"full-iframe" class="full-iframe". Simply add the
equals sign and you are good to go.


Reply to this email directly or view it on GitHubhttps://github.com/twitter/bootstrap/issues/675#issuecomment-7908404.

@nozpheratu

The javascript above to set the width looks a bit awkward on smaller screen sizes and is off to the side rather than centered.

@drewB
drewB commented Sep 5, 2012

regarding the js code, I would suggest you use $(window).width() instead of $(document).width(). If you use document and you have a parent element that has a width wider than the current view port then the modal looks really bad.

@luaz
luaz commented Sep 7, 2012

to play well with responsiveness, try the following (add modal-big class)

$('#feedback-modal').modal({
        backdrop: true,
        keyboard: true
    }).addClass('modal-big');
.modal-big {
    width: 700px;
    margin-left: -350px;
}

@media (max-width: 767px) {
    .modal-big {
        width: auto;
        margin-left: auto;
    }
}
@heapifyman heapifyman referenced this issue in l0rdn1kk0n/wicket-bootstrap Sep 14, 2012
Closed

Allow to configure size of Modal window #60

@srlprabhu

Thanks guys..

is it possible to have a layout inside the modal header ? and is it possible to have the width / height and position aligned automatically ?

@gabrielizalo

This plugin fix and improve modal windows: Bootstrap Modal
Take a look!

@joshlangner

@fat This still being an issue, I think the right solution to this is to make Modal work with the grid system, and apply the negative margins based on that.

There are numerous situations where we need to control the specific width of the Modal, and we need to have it work well in responsive situations without having to hack it up.

Putting it on the grid will solve this problem, and collaborates well with the bootstrap conventions. Specify the Modal width by using the "spanN" classes.

Thoughts?

@nozpheratu

^ +1

@pslocom
pslocom commented Nov 1, 2012

@joshlangner I agree. Hopefully they can do something like that, as I was kind of shocked to find out that isn't how it worked already.

Being able to set a spanN on the modal makes the most sense. The default modal box isn't always wide enough for the content that needs to be in it, and to have to hack together a fix when the obvious solution is right there just seems odd...

@josanastrid

How about this?

$(document).on('show', '.modal', function(){
        $(this).css({
            'width': function(){
                var width = $(this).data('width');
                var percentIndex = width.indexOf("%");
                if( percentIndex == width.length - 1 ){
                    var percentWidth = eval(width.substring(0, percentIndex)) / 100;
                    return $(document).width() * percentWidth;
                }else{
                    return width;
                }
            },
            'margin-left': function(){
                return -($(this).width() / 2);
            }
        });
    });
@joshlangner

@josanastrid that method was probably the first on everyone's minds, however it creates a fairly significant number of problems. Here are a few:

  • Cross browser widths / heights are challenging.
  • In responsive situations going from desktop > tablet > mobile, the modal will get too small and cause UX issues.
  • Performance will be degraded.

Using CSS classes solves all of the above problems, and works within the conventions of Bootstrap.

I recently wrote my own custom modal (very simple) that used the spanN method and it works AWESOME in all cases, including responsive situations. We're seriously just a few steps away from a good result.


Side note: For future reference, you don't need to use eval(). You can instead multiply the string by 1 and that will change the type to a Number without changing the value.

var width = ($(this).data('width'))*1;
@josanastrid

@joshlangner can you share your solution then? cool, thanks! :)

@sadjow
sadjow commented Nov 9, 2012

It's simple:

.bigModal {
width:80%;
margin-left:-40%;
}

@Gamaroff

nice one @sadjow

@cbier
cbier commented Dec 5, 2012

@rviscomi Thanks :)

@Artistan
Artistan commented Dec 7, 2012

to support full responsive display use something like this.

@media (min-width:768px){
    body .modal.large {
        width: 80%; /* desired relative width */
        margin-left:-40%; /* -(width/2) */
    }
}
@Artistan
Artistan commented Dec 7, 2012

I also had to set modal to scroll when on smaller screens due to a tall form.

@media (max-width:768px){
body .modal{
position: absolute !important;
}
}

@ajaypatelaj

I use this one solve height & width issue.

body .modal {
  width: 90%; /* desired relative width */
  left: 5%; /* (100%-width)/2 */
  margin: auto auto auto auto; /* place center */
}
body .modal.fade.in {
  top: auto; /* fade in to correct spot */
}
@rviscomi

@ajaypatelaj Isn't margin: auto auto auto auto; the same as margin: auto;?

@ddpunk
ddpunk commented Feb 8, 2013

Thanks @ajaypatelaj. I used your sugestion and it is working for all widths (responsive - ok).

So modal can be created like that:

<div class="modal span10"> ... </div>

Modal with .span10 class width, now use js code below. It works fine.

$('.modal').modal({
        backdrop: true,
        keyboard: true
  }).css({
        'width': function () { 
              return ($(this).width() / $(document).width())*100 + '%';
            },
        'left': function () { 
            return (100 - (($(this).width() / $(document).width())*100))/2 + '%';
           },
        'margin': 'auto'
  });

where

($(this).width() / $(document).width())*100

is percetage width of modal set by 'spanXX' class. So using this code you can use .spanXX class for modal width.

It works quite ok for all widths

@aprice42

Thanks @ddpunk that worked for me. I am having trouble getting the height to adjust to the height of the window.

I tried @ajaypatelaj's solution, but I am still getting a scrollbar and the modal window is not nearly as tall as the browser window.

Anyone have thoughts on how to make the window size dynamically to the height of the object it contains?

@ghost
ghost commented Mar 5, 2013

@rviscomi Thanks that is exactly what I needed

@gewoonlogisch

In CSS3 it is posible to calculate with the viewport width. This code works on CSS3 complaint browsers:

style="width: 50vw; margin-left: -25vw;"

it wil make the model 50% of the viewport/screen width. By adding margin-left: 25vw the model is placed 25% from the left and right screen edge.

A website with a great overview of browser support: http://caniuse.com/viewport-units

@Tristanimve

Based on @MindWire, i just add "if" to respect center when a max-width is set on large screen

$('.modal').modal({
        backdrop: true,
        keyboard: true
    }).css({
       'width': function () { 
           return ($(document).width() * .9) + 'px';  
       },
       'max-width': '1000px', /* set the max width */
       'margin-left': function () { 
       if($(this).width()>1000) {
           return -500; /* the max /2 */
           } 
           else {
            return -($(this).width() / 2);   
               }

       }
});
@sindrehaaland

80% width, centered, responsive using only CSS:

#modal {    
    width: 80%;
    margin-left: -40%;
    left: 50%;
}

Props to @sadjow

@AIMAGU
AIMAGU commented Jun 4, 2013

good discussion topics. Thanks All...

@hieronymusdesign

@sindrehaaland
Dude you made my day with that piece of code ! Cheers

@nickel715

@sindrehaaland great stuff, is there a way to do the same for the height? i need a higher dialog, but the .modal-body is fixed to max 420px height, so if i increase the heigh of the modal it grows but not the content(.modal-body) :(

@victorbstan

For posterity, I think Bootstrap 3 will solve a lot of issues, but this is what I use in the meanwhile:

$gallery_modal
    .modal()
    .css({
      'width' : function () {
        return ($(window).width() * .9) + 'px';
      },
      'max-width': '1000px',
      'position': 'absolute',
      'left' : 'auto',
      'right' : 'auto',
      'top' : function(){ return $(window).scrollTop(); },
      'margin-top' : '20px',
    });

  $gallery_modal
    .find(".modal-body")
    .css({
      "max-height" : "1000px",
    });
@cvrebert cvrebert locked and limited conversation to collaborators Jun 14, 2014
@DocX DocX pushed a commit to DocX/bootstrap that referenced this issue Sep 16, 2014
@glebm glebm fix typo #675 [ci skip] 1875f33
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.