I have database content which has different types of data, such as Youtube videos, Vimeo videos, text, Imgur pictures, etc. All of them have different heights and widths. All I have found while searching the Internet is changing the size to only one parameter. It has to be same as the content in the popup.
This is my HTML code. I also use Ajax to call the content.
<div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="ModalLabel"></h3>
</div>
<div class="modal-body">
</div>
</div>
This question is related to
javascript
jquery
html
css
twitter-bootstrap
The answer is
This worked for me, none of the above worked.
.modal-dialog{
position: relative;
display: table; /* This is important */
overflow-y: auto;
overflow-x: auto;
width: auto;
min-width: 300px;
}
I had the same problem with bootstrap 3 and the modal-body div's height not wanting to be greater than 442px. This was all the css needed to fix it in my case:
.modal-body {
overflow-y: auto;
}
Simple Css work for me
.modal-dialog {
max-width : 100% ;
}
set width:fit-content on the modal div.
A simple CSS solution that will vertically and horizontally center the modal:
.modal.show {
display: flex !important;
justify-content: center;
}
.modal-dialog {
align-self: center;
}
I couldn't get PSL's answer working for me so I found all I have to do is set the div holding the modal content with style="display: table;". The modal content itself says how big it wants to be and the modal accommodates it.
For Bootstrap 2 Auto adjust model height dynamically
//Auto adjust modal height on open
$('#modal').on('shown',function(){
var offset = 0;
$(this).find('.modal-body').attr('style','max-height:'+($(window).height()-offset)+'px !important;');
});
I simply override the css:
.modal-dialog {
max-width: 1000px;
}
As of Bootstrap 4 - it has a style of:
@media (min-width: 576px)
.modal-dialog {
max-width: 500px;
}
so if you are looking to resize the modal width to some-width larger, I would suggest using this in your css for example:
.modal-dialog { max-width: 87vw; }
Note that setting width: 87vw; will not override bootstrap's max-width: 500px;.
There are many ways to do this if you want to write css then add following
.modal-dialog{
display: table
}
In case if you want to add inline
<div class="modal-dialog" style="display:table;">
//enter code here
</div>
Don't add display:table; to modal-content class. it done your job but disposition your modal for large size see following screenshots.
first image is if you add style to modal-dialog
if you add style to modal-content. it looks dispositioned.
You can do that if you use jquery dialog plugin from gijgo.com and set the width to auto.
$("#dialog").dialog({_x000D_
uiLibrary: 'bootstrap',_x000D_
width: 'auto'_x000D_
});<html>_x000D_
<head>_x000D_
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>_x000D_
<link href="http://code.gijgo.com/1.0.0/css/gijgo.css" rel="stylesheet" type="text/css">_x000D_
<script src="http://code.gijgo.com/1.0.0/js/gijgo.js"></script>_x000D_
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />_x000D_
</head>_x000D_
<body>_x000D_
<div id="dialog" title="Wikipedia">_x000D_
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1122px-Wikipedia-logo-v2.svg.png" width="320"/>_x000D_
</div>_x000D_
</body>_x000D_
</html>You can also allow the users to control the size if you set resizable to true. You can see a demo about this at http://gijgo.com/Dialog/Demos/bootstrap-modal-resizable
My search led me here so might as well add my two cents worth of idea. If you are using Monkey friendly Twitter Bootstrap modal then you can do something like this:
var dialog = new BootstrapDialog({
id: 'myDialog',
title: 'Title',
closable: false,
// whatever you like configuration here...
});
dialog.realize();
if (isContentAYoutubeVideo()) {
dialog.getModalDialog().css('width', '80%'); // set the width to whatever you like
}
dialog.open();
Hope this helps.
Mine Solution was just to add below style.
<div class="modal-body" style="clear: both;overflow: hidden;">
for bootstrap 3 use like
$('#myModal').on('hidden.bs.modal', function () {
// do something…
})
Source: Stackoverflow.com