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
Related
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.
I use a lot of modals on my current project. I'm using the Animated.css library for animations. - The problem is that I want to use a animation when the modal close. E.g: open modal = flipInX / closing modal = flipOutX
I've seen a lot of these questions, but I can't get it to work for me. I want the effect to work on all of my modals, not just one specific.
<div class="modal animated flipInX fade modal-fullscreen" id="info" tabindex="-1" role="dialog" aria-labelledby="d01" aria-hidden="true">
<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>
</div>
<div class="modal-body">
<div class="container-fluid">
</div>
</div>
</div>
</div>
</div>
.modal {
transiton: opacity 2s;
}
.modal-close {
opacity: 0;
}
you can add the class to do the animation when the user close modal.
getElementById('btn-close-modal').classList.add('modal-close')
thus, the modal will assume 0 of aptitude with the animation defined in the modal-close class
I am using vue.js with Bootstrap.
There is modal dive which shows like below I am finding a class that increase the width of modal div,
My modal div looks like this. I am planning to add 12 more tabs and for that I will need more width.
I am using modal-lg class to set the width.
I am using below code for modal div
<div class="modal fade" id="modal_create_product" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
Create Product
</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<!-- Form Errors -->
<div class="alert alert-danger" v-if="createForm.errors.length > 0">
<p class="mb-0"><strong>Whoops!</strong> Something went wrong!</p>
<br>
<ul>
<li v-for="error in createForm.errors">
{{ error }}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
I just do
.modal-lg {
max-width: 70%;
}
Why don't you use the min-width CSS for your modal-content?
Like this:
.modal-dialog.modal-lg {
min-width: 80%
}
I am having trouble displaying a bootstrap modal on my site. The modal div is too tall and too narrow relative to the modal-dialog div.
This is where I am toggling the modal.
<footer>
<div id="header-footer-content" class="container">
Contact |
Privacy Policy
</div>
</footer>
And this is how I am defining the modal. (Note the modal is actually defined in a partial view in my rails project, but the html below is the result post-rendering.)
<div class="container>
<div class="row">...</div>
<div class="modal fade" id="myModal" 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-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<p>some text</p>
</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>
</div>
I'm using the example modal from the bootstrap website, so I'm not sure why it's being displayed like this. Does anyone have any experience with this kind of graphical issue?
EDIT: I am using bootstrap v3.3.4. The site can be found here.
I think it might have something to do with the container div you have wrapped around your modal. Try removing that and maybe also try removing the empty row at the top of it too.
I have a modal window which open up when the user focuses on search input box. but currently when the modal opens, the modal background overlay blocks it.
How can i move the modal overlay background lower or something, so the user can still type on the search input box while the modal window stays opens .
<form>
<input type="email" class="form-control border-left-none" id="openmodalOnfocus" placeholder="enter text">
</form>
<div class="modal hide" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<div class="row">
<div class=" col-md-4">
lorem i[p sum on left
</div>
<div class=" col-md-4">
lorem ipsom on right
</div>
</div>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
Just add this to your css:
.modal-backdrop {
z-index: -1;
opacity: 0 !important;
width: 0px;
height: 0px;
}
You can edit your CSS so the modal backdrop will never show:
.modal-backdrop {
display: none;
}
Check the docs for jQuery activation of Bootstrap modals here.
You can show a modal without the backdrop by simply adding the data-backdrop attribute to the modal div and setting it to false:
<div class="modal fade" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
...
</div>
</div>
</div>