SHARE:

Author: Posted on November 8, 2012 at 1:24 pm
CSS/HTML
TUTORIALS
22

Change the height, width and position of a modal in twitter bootstrap

Changing the height, width and position of a bootstrap modal isn’t as straight forward as you might think, but this quick tutorial and code snippets will show you how to do exactly that.

Changing the height of a Twitter Bootstrap Modal

Often you need to change the height of the modal to accomodate for a large form or other elements that are bigger than the standard modal size. Changing the modal height is as simple as over-writing the max-height which is set on a modal. See the CSS code below:

#myModal .modal-body {
	max-height: 800px;
}

Note that we are setting “max-height” on the modal-body element not the modal itself, the other thing to note is that this won’t set the modal’s height to 800px this will allow the .modal-body element to expand so to accomodate for anything within and remove the scroll bar.

Changing the width of a Twitter Bootstrap Modal

Changing the width is a little trickier as you need to deal with the negative margins set on the modal, see the code below:

#myModal {
	width: 900px; /* SET THE WIDTH OF THE MODAL */
	margin: -250px 0 0 -450px; /* CHANGE MARGINS TO ACCOMODATE THE NEW WIDTH (original = margin: -250px 0 0 -280px;) */
}

Here we set the width of the modal element to 900px wide, this is the actual width we are setting the modal too. We then need to accomodate for the new width by modifying the modal margins. We change the left margin from -280px to -450px, 900 / 2. Easy!

Changing the position of a Twitter Bootstrap Modal

This is also a pretty easy one, we simply modify the margins as we have just do with the width to get the desired effect. Often when we change the height of a modal we may want to push the modal up to prevent the modal going off the bottom of the page on smaller resolutions, so we simple increase the negative top margin value as the code below shows:

#myModal {
	margin: -300px 0 0 -280px; /* PLAY THE WITH THE VALUES TO SEE GET THE DESIRED EFFECT */
}

Sorted! So there you are, now you know how to change the height, width and position of a Twitter bootsrap modal.

  • /li>
  • Ciara

    Thank you!

    • revillwebdesign

      I am glad it helped! :)

  • curious

    how do you position modal vertical in an iframe? let say you have a long page in iframe and you click on modal it goes to the center of that inner page, meaning you have to scroll down to the middle to find it.

    • revillwebdesign

      That is an interesting one! What is the reason it has to be in an iframe? I think you would need to use some jQuery within the iframe page to push the modal up depending on the scroll.

      $(window).scroll(function(){
      var height = //WORK OUT WHAT THE HEIGHT NEEDS TO BE AND WORK OUT THE NEGATIVE MARGIN
      $(‘#myModal’).css(‘margin’, ‘-300px 0 0 ‘ + height);
      });

      I couldn’t really offer any more unless I see your page, please let us know the solution you come up with!

      Thanks,

      Leon.

      • curious

        the reason is facebook canvas :)

        you can find the app here https://www.facebook.com/punkrockholiday/app_418663274878880

        find the modal by clicking on the black user icon to see all fans voted. tnx

        • revillwebdesign

          Getting “That page cannot be found” from fb. Might be because i am on my tablet. Will take another look soon! :-)

          • curious

            works just fine on iPad. Maybe you are behind some Revill firewall :D I look forward to see your solution. It would mean a lot! Next app will have your recommendations. Tnx for your effort.

          • revillwebdesign

            I think I might have a solution I just need to find time to test it #meetingsallday But if you wanted to take a look at getting the iframes parent height using parent.document.body.clientHeight then you could possibly work out at what position you need to place the modal? And then set the margins with jQuery.

        • revillwebdesign

          Got the solution! Take a look at this: http://www.revillwebdesign.com/demos/modaltest/

          basically, in the iframe:

          $(function(){
          $(‘#myModal’).on(‘show’, function (e) {
          var vscroll = $(“body”, top.document).scrollTop();
          var iframeHeight = $(window).height();
          var modalHeight = $(‘#myModal’).height();
          var topMargin = (((iframeHeight / 2) – vscroll) – modalHeight);
          $(‘#myModal’).css(“margin-top”, “-” + topMargin + “px”);
          });
          });

          When the modal is shown, you work out the parents scroll position, the iframes height and the modal height.

          From this you can work out the position you want the modal to display: var topMargin = (((iframeHeight / 2) – vscroll) – modalHeight);

          Then use the .css() method to set the top margin of the modal! Done :)

          Let me know how you get one, I hope this solution works / makes sense.

          Thanks for your contribution!

          Leon.

          • curious

            great stuff!!! to get vscroll to work i changed this line: var vscroll = $(‘html, body’, window.parent.document).scrollTop();

            anyways this only works if iframe is on the same domain, otherwise you dont have permission to access document.

            as with facebook, the api allows you to access pageInfo and return it with a callback which i havent been able to get it right :(

            maybe you can?

            http://developers.facebook.com/docs/reference/javascript/FB.Canvas.getPageInfo/

          • revillwebdesign

            I don’t have the means to set-up a FB development environment :( Have you asked the question on StackOverflow? Please let us know the solution if you do find it. I will keep thinking of potential solutions, i should get into FB development! :)

          • curious

            or don’t :) fb is changing rules to play the game as they please. it can be very frustrating :P

          • revillwebdesign

            ha, how long have you been creating FB apps for (good work btw) :)

  • Maxpoirier

    Ok, I am looking to vertically center my modal.. In which file and where should I add the last #mymodal margin block ? Thanks for you help

    • revillwebdesign

      You can place that anywhere after the bootstrap.css include. So if you had lefts say index.html as follows:

      #myModal {
      margin: -300px 0 0 -280px; /* PLAY THE WITH THE VALUES TO SEE GET THE DESIRED EFFECT */
      }

      ×
      Modal header

      One fine body…

      Hope this helps.

      Leon.

      • revillwebdesign

        Sorry, Disqus is not great for code commenting. Let me know if that makes sense, if not I will post a link to a HTML file.

  • Hugh

    Thanks – in FIrefox, I had to change the full margin decl: from “-250 0 0 -450″ to declare onlly the margin-left: 450px, otherwise I was onliy seeing the bottom part of the modal. (I am NOT using class=”container” on my modal – maybe that resets the margins?)

  • http://twitter.com/avajming Houming Chen

    good

  • Computer Pilot

    Happened to see your test application (http://www.revillwebdesign.com). Is it possible to display the modal window outside that iFrame? My modal window is wider than the frame accommodating it.

  • ankit chauhan

    i wanted to open my bootstrap modal from the place where the link has been clicked but defaultly it opens from the start of the page ,
    please suggest me a dynamic way to do the same .

    Thanks in advance

    • ankit chauhan

      and i like to add one more point , the scroll bar moves up as the modal window opens, i also want to restrict this.

  • Obi Wan Kenobi

    What if you want to resize the window? ..after doing this modifications the modal window is not responsive anymore.

  • REVIEWS

  • No categories have been added yet

TABLE OF CONTENTS