Tag Archives: Twitter Bootstrap CSS

How to fix the Twitter Bootstrap Modal box height and width with central position?

by

img2

 

Recently, while working on a web-portal which has lots of modal boxes to keep the constant flow of information, I encountered an issue of keeping the position of modal boxes in the center of the page while changing the height and width of the modal box specifically as per the modal-box ID.

The solution for this fix was achieved by tweaking in the CSS specifically on the basis of ID’s.

Height fix

If you want to accommodate long form of elements in the modal box and do not want the scroll-bar to appear, set your css as following:

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

Remember that the max-height has to be given only for the modal-body and not the whole modal box. Another thing to be noticed is that, it doesn’t set the height to 800px but it just gives the flexibility to the .modal-body element to stretch up to 800px so as to accommodate anything without scroll-bar.

Width fix

Now, while setting the width you can deal directly with the whole modal-box not just the .modal-body element. Set the width as per your choice for any specific modal-box. Then, you can change the margin accordingly to accommodate the new width.

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

Remember that you have to set the left margin – half of width (here: 900/2 = 450) and as a negative integer.

To fix the vertical position, you have to simply modify the margins to get the desired effect. Often when you change the height of a modal you may want to push the modal up to prevent the modal going off the bottom of the page on smaller resolutions, so you can simply increase the negative top margin value:

#newModalID {
	margin: -120px 0 0 -450px; /* PLAY WITH THE VALUES TO SEE GET THE DESIRED EFFECT */
}