I made a dialog and gave it a fixed height. I'd like to keep this height, but I have two scroll bars and only one to keep scrolling through.
Here is my HTML code:
<div class="modal fade dialog-layout-modal-body" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true" #modal>
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content dialog-layout-modal-body">
<div class="modal-header">
<h5 class="modal-title">Add new item</h5>
<button type="button" class="close" (click)="close()" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<ng-content></ng-content>
</div>
</div>
</div>
</div>
Here is the css code:
#media (min-width: 768px) {
.dialog-layout-modal-body {
overflow-y: auto;
max-height: 662px;
}
}
How do I solve the problem of leaving only one scrollbar but also keep the height of the dialog?
If your body element gets a class called modal-open when the model shows then use the below css to hide the body's scrollbar.
body.modal-open {
height: 100vh;
overflow-y: hidden;
}
100vh makes the body's height 100% of the viewport. More details at CSS-Tricks.
Related
I'm creating a modal window using bootstrap to show some text with an image. Problem is the image spills out of the modal. I've tried adding responsive class to the image but it did not worked.
<div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" id="modalBasic">
<div class="modal-dialog modal-sm modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Upgrade to Basic</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
<img src="./img/upi.jpg" class="img-responsive"/>
</div>
</div>
</div>
</div>
I've tried removing modal-sm class, but it failed on small screen.
Set the image's width property to 100% or add CSS property
.img-responsive { width: 100%; }
What you want to achieve is image should resize according to the width of the modal. Therefore image's width should adhere to the modal's width.
Working example: https://codesandbox.io/s/sharp-villani-1lsjw5?file=/index.html:2228-2298&resolutionWidth=456&resolutionHeight=675
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 */
}
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 -->
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);
})