I took a CSS image gallery (https://codepen.io/gabrielajohnson/pen/EMVxEL) which I would like to use in my project.
The problem is the gallery uses html,body {width:100%,height:100%} which works as expected. But in my case the gallery is in a Bootstrap Modal where height: 100% is not working and it gives me a 0 height. I can't use a height in px, because I don't know how many items gallery has.
Do you have some ideas how could I fixed it? I tried to use min-height:100%, height:100% in the modal window, but without result.
Here is my CodePen example: https://codepen.io/Piticu/pen/zYYLrKY
You'll find below a basic html snippet with the corresponding css for an 100% modal height in Bootstrap 3. Use this as the main structure and build up your image gallery in the modal body.
<body>
<div class="container">
<div class="row text-center">
<h3>The Large Modal</h3>
<a href="#" class="btn btn-lg btn-primary"
data-toggle="modal" data-target="#lgModal">
Click to open Modal </a>
</div>
</div>
<div class="modal fade" id="lgModal" tabindex="-1" role="dialog" aria-labelledby="lgModal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Large Modal</h4>
</div>
<div class="modal-body">
<div class="gallery">
GALLERY <!-- here your gallery -->
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
With this css
html, body {
height: 100%;
}
body {
position: relative;
}
body > .container,
body > .container-fluid {
min-height: 100%;
}
.modal {
position: absolute;
top:5%; bottom:5%; /* see .modal-dialog below */
height: auto;
}
.modal-dialog {
/* 100% - top 5% - bottom 5% */
height: 90%;
}
.modal-content {
height: 100%;
}
.modal-body {
/* 100% - heightModalFooter */
height: calc(100% - 160px);
}
.gallery {
position: relative;
height: 100%;
background-color: #eee; /* remove this line, for test only */
}
Related
I am trying to position the modal in the center of the screen always.
To do so , I added the following CSS class to the modal :
.modal-position {
position: fixed;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%);
}
But its not getting exactly centered and on small screen size a vertical scroll bar appears beside it though there is enough space for the modal.
JS fiddle for the same : https://jsfiddle.net/86n9pbat/
Have you tried adding overflow: hidden in your css body/modal when modal is open?
Try this code
HTML
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog myModal">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
CSS
.myModal
{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin:auto;
display:table;
max-width:50%;
}
.myModal .modal-content
{
display:table-cell;
}
pretty much the same code. I have added a myModal class to modal-dialog and the CSS..
link for reference
hope this helps..
No need for the above code.
Bootstrap modal is responsive by default.
If you want to adjust the width just change it on modal-content class in your css file.
I'd like to lock a Bootstrap 3 modal to the bottom-right corner of the window, like this:
I have tried to move it using top: x%; left: x% CSS, but that completely breaks responsiveness. How do I lock it to the bottom right of the window, regardless of window size?
Thank you in advance.
JSFiddle: http://jsfiddle.net/eqhdqsyp/6
if you want to position it relative to the window, you want position:fixed; and if you want it to stay anchored right and bottom when the screen resizes left and top won't work, as you already noted so use right and bottom instead.
Bootstrap already styles this div like this:
#media (min-width: 768px)
.modal-dialog {
width: 600px;
margin: 30px auto;
}
.modal-dialog {
position: relative;
width: auto;
margin: 10px;
}
so you'll need to override that with this:
.modal.in .modal-dialog {
position:fixed;
bottom:0px;
right:0px;
margin:0px;
}
http://codepen.io/ryantdecker/pen/ZOpQOX
.modal-class {
position: absolute;
bottom: 0;
right: 0;
}
This should work.
The basic concept from the link does seem to work. Here is a fiddle: https://jsfiddle.net/d0nfh6kz/
#myModal1 {
top:70%;
left:27%;
outline: none;
}
<!-- Button trigger modal -->
<a data-toggle="modal" href="#myModal1" class="btn btn-primary btn-lg">Launch demo modal</a>
<!-- Modal -->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
How can I center this modal window vertically regardless of the size of the contents displayed. In my page, I am displaying an image as a modal window and I would like it to display in the center of the screen. I can align it horizontally, but I can't get it to cooperate vertically. Any ideas/examples of this being done?
I followed this example in my page: modal window demo plunker
but my actual content of the modal window looks like this:
<script type="text/ng-template" id="myModalContent.html">
<div>
<img class= "attachmentImage" src={{items}} />
</div>
</script>
Should I be looking to make changes in bootstrap.min.css or ui-bootstrap-tpls-0.13.0.jsor is the best way to approach this with my styles in my own sheet.
Thank you very much for your time. Let me know if you need more information or if I am being unclear.
I strongly disagree with 1Bladesforhire's answer, because the top of the modal container becomes inaccessible when it is taller than the viewport height. This is a common issue when centering taller children than the parents, using the absolute vertical centering method.
My preferred method of vertically centering a Bootstrap modal is
.modal-dialog {
display: flex;
flex-direction: column;
justify-content: center;
overflow-y: auto;
min-height: calc(100vh - 60px);
}
#media (max-width: 767px) {
.modal-dialog {
min-height: calc(100vh - 20px);
}
}
/* you only need the above CSS. The code below centers the modal trigger button */
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
While vertically centered when shorter than the viewport width, .modal-content is still fully accessible even when it has a height of 300vh:
.modal-dialog {
display: flex;
flex-direction: column;
justify-content: center;
overflow-y: auto;
min-height: calc(100vh - 60px);
}
#media (max-width: 767px) {
.modal-dialog {
min-height: calc(100vh - 20px);
}
}
/* you only need the above CSS. The code below centers the modal trigger button */
.modal-content {
height: 300vh;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I'm using Bootstrap v3.3.0 for my website.
I'm showing an image into a bootstrap modal. But I'm getting extra white space on the right side of an image into a bootstrap modal dialog. I tried several CSS tricks by setting width to auto/fix size, setting left and right margin to auto, etc. but couldn't succeed so asking for help.
Following is my bootstrap modal code.
<div id="myModal1" class="modal fade in" aria-hidden="false" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" style="display: block;">
<div class="modal-backdrop fade in"></div>
<div class="modal-dialog" style="margin-top: -20.5px;">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal" type="button">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 id="myModalLabel" class="modal-title">
Rebate Receipt
</h4>
</div>
<div class="modal-body" style="max-height: 420px; overflow: auto; margin-left:auto; margin-right:auto;">
<img class="img-responsive" style="text-align:center;" src="http://55.220.5.82:80/Students/2014_Q4/student_123343445434.png"></img>
</div>
</div>
</div>
</div>
The screen-shot is attached below :
Thanks.
Try to add this to your css
.modal-dialog {
width:auto;
}
UPDATE
.modal {
text-align: center;
}
.modal:before {
display: inline-block;
vertical-align: middle;
content: " ";
height: 100%;
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
.modal-dialog{
width:auto;
}
Working fiddle
http://jsfiddle.net/52VtD/9387/
http://jsfiddle.net/bqffdw57/5/
$('#myModal1').on('shown.bs.modal', function (e) {
//get image width
//+30 = padding left and right for .modal-body
//+20 = the approximate width of the scrollbar
var w=$('#img').width()+30+20;
$('.modal-dialog').width(w);
})
I have to align two buttons at the bottom of the page, but I can not do it. One is the button "gallery" and the other is icon linkedin.
<div class="container fill">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item">
<div class="fill" style="background-image:url('http://www.mysite/images/category/image.jpg');background-position: center;">
<div class="container">
<div class="carousel-caption">
<h1>TITLE</h1>
<p class="lead">Description</p>
</div>
</div>
<div class="pull-right">
<a class="btn btn-large btn-primary" href="categories.php?id=17">View Gallery</a>
</div>
</div>
</div>
</div>
<div class="pull-left">
<div class="social-caption">
<button class="btn btn-large btn-linkedin">
<i class="icon-linkedin"></i><span><a style="color:white" vhref="http://www.linkedin.com/"> | Linkedin</span></button>
</div>
css for the two buttons:
.social-caption {
background-color: transparent;
position: relative;
max-width: 100%;
padding: 0 20px;
bottom: 45px;
left: 5px;
}
.gallery-button {
background-color: transparent;
position: relative;
max-width: 100%;
padding: 0 20px;
bottom: 45px;
right: 5px;
}
The two buttons do not appear aligned. This problem is seen especially with mobile devices
Solutions? Thanks
You could do something like THIS, for example. It uses position:absolute to locate the buttons at the bottom of the page's content (bottom:0) - or relative to their parents positioning (in this case the body. The alternative would be to use position:fixed which would ensure the buttons appear at the bottom of the viewport at all times.
See the difference between absolute positioning and fixed positioning.
HTML
<button>Button 1</button>
<button>Button 2</button>
CSS
body{
position:relative;
}
button{
position:absolute;
bottom:0;
}
button:last-child{
left:100px;
}
May be you could use this:
<input type='button' style='position:fixed; top:94%; left:82%; width:100px' value='
this means the button will appear at the right corner in the bottom of your page.
//hope so this code helps you.
.center{
justify-content: center;
display:flex;
align-item: center
}
.right{
justify-content: flex-end;
display:flex;
}
//for center align
<div class="center">
<button>First Button</button>
<button>Second Button</button>
</div>
//for right align
<div class="right">
<button>First Button</button>
<button>Second Button</button>
</div>