New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Set modal width? #675

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

Comments

Projects
None yet
@dmackerman
Copy link

dmackerman commented Nov 22, 2011

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

This comment has been minimized.

Copy link

trojkat commented Nov 25, 2011

Same here. I need wider modal window :-(

@envex

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link
Author

dmackerman commented Nov 28, 2011

@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

This comment has been minimized.

Copy link

paramah commented Nov 30, 2011

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

@trojkat

This comment has been minimized.

Copy link

trojkat commented Nov 30, 2011

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

@brennanmceachran

This comment has been minimized.

Copy link

brennanmceachran commented Nov 30, 2011

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

so... say:

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

This comment has been minimized.

Copy link

paramah commented Dec 1, 2011

nice one :)

@fat

This comment has been minimized.

Copy link
Member

fat commented Dec 3, 2011

yep - you just have to set the css.

@fat fat closed this Dec 3, 2011

@trojkat

This comment has been minimized.

Copy link

trojkat commented Dec 21, 2011

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

@dmackerman

This comment has been minimized.

Copy link
Author

dmackerman commented Dec 21, 2011

I agree with @trojkat.

@fat

This comment has been minimized.

Copy link
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

This comment has been minimized.

Copy link

rviscomi commented Jan 26, 2012

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

This comment has been minimized.

Copy link

EricWarnke commented Mar 2, 2012

@rviscomi Excellent solution, cheers :)

@openwater77

This comment has been minimized.

Copy link

openwater77 commented Apr 3, 2012

@rviscomi Thanks!

@mewdriller

This comment has been minimized.

Copy link

mewdriller commented Apr 9, 2012

@rviscomi Thanks for the nice clean solution!

@gimenete

This comment has been minimized.

Copy link

gimenete commented May 18, 2012

@rviscomi thanks!

@davidchua

This comment has been minimized.

Copy link

davidchua commented Jun 4, 2012

@rviscomi that's perfect! Thanks!

@mark47

This comment has been minimized.

Copy link

mark47 commented Jun 5, 2012

@rviscomi - excellent!

@MindWire

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

ghost commented Jun 26, 2012

@rviscomi Excellent, thanks so much!

@lilred

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

Jean-lucLanglois commented Aug 3, 2012

sweet! perfect solution

@axpence

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

MindWire commented Aug 21, 2012

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

This comment has been minimized.

Copy link

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//issues/675#issuecomment-7902737.

@MindWire

This comment has been minimized.

Copy link

MindWire commented Aug 21, 2012

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

This comment has been minimized.

Copy link

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//issues/675#issuecomment-7908404.

@drewB

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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;
    }
}
@srlprabhu

This comment has been minimized.

Copy link

srlprabhu commented Oct 2, 2012

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 comment has been minimized.

Copy link

gabrielizalo commented Oct 23, 2012

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

@joshlangner

This comment has been minimized.

Copy link

joshlangner commented Oct 23, 2012

@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

This comment has been minimized.

Copy link

nozpheratu commented Oct 23, 2012

^ +1

@pslocom

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

josanastrid commented Nov 8, 2012

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

This comment has been minimized.

Copy link

joshlangner commented Nov 8, 2012

@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

This comment has been minimized.

Copy link

josanastrid commented Nov 8, 2012

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

@sadjow

This comment has been minimized.

Copy link

sadjow commented Nov 9, 2012

It's simple:

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

@Gamaroff

This comment has been minimized.

Copy link

Gamaroff commented Nov 10, 2012

nice one @sadjow

@cbier

This comment has been minimized.

Copy link

cbier commented Dec 5, 2012

@rviscomi Thanks :)

@Artistan

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

ajaypatelaj commented Dec 11, 2012

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

This comment has been minimized.

Copy link

rviscomi commented Dec 11, 2012

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

@ddpunk

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

aprice42 commented Feb 13, 2013

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

This comment has been minimized.

Copy link

ghost commented Mar 5, 2013

@rviscomi Thanks that is exactly what I needed

@gewoonlogisch

This comment has been minimized.

Copy link

gewoonlogisch commented Apr 23, 2013

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

This comment has been minimized.

Copy link

Tristanimve commented Apr 24, 2013

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

This comment has been minimized.

Copy link

sindrehaaland commented May 10, 2013

80% width, centered, responsive using only CSS:

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

Props to @sadjow

@AIMAGU

This comment has been minimized.

Copy link

AIMAGU commented Jun 4, 2013

good discussion topics. Thanks All...

@hieronymusdesign

This comment has been minimized.

Copy link

hieronymusdesign commented Jun 5, 2013

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

@nickel715

This comment has been minimized.

Copy link

nickel715 commented Jun 18, 2013

@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

This comment has been minimized.

Copy link

victorbstan commented Jun 19, 2013

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",
    });

@twbs twbs locked and limited conversation to collaborators Jun 14, 2014

DocX pushed a commit to DocX/bootstrap that referenced this issue Sep 16, 2014

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.