I all,
I am using modals on my website and the scroll area containing them do not fit the page.
See on the screenshot.
I am not applying any additional style to the modals and I can't figure out where does the problem come from.
I am sorry it is hard to post code because I am not sure which part might cause this and the code base is relatively large..
EDIT: Sample modal
<div class="modal fade" id="addSpotModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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" onclick='addSpot.cancel()'
aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Add a spot</h4>
</div>
<div class="modal-body">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" onclick='addSpot.cancel()'>Close</button>
<button type="button" class="btn btn-primary" onclick='addSpot.sendAddSpotRequest()'>Save changes</button>
</div>
</div>
</div>
Any idea?
Thanks. Olivier
Firstly, the scroll is based on the modal itself, so as you can see, the rounded corners are not visible. The content inside the modal is pushing the size to be larger than the viewing area. You could try the size utilities like modal-lg on the dialog (<div class="modal-dialog modal-lg">) if you haven't done so. You can also change the dimensions through LESS/variables. The #modal-lg, #modal-md, and #modal-sm. To decrease the top margin, you would need to adjust the CSS for modal-dialog as 30px is the default.
Related
!Do not close it as duplicate, the answers in the "duplicate" only center it relative to the X button!
I'm trying to completely center the modal-title of a bootstrap4 modal.
However, it only centers it relative to the X and not to the whole width of the modal. The answers here: Bootstrap 4 Modal Center Content all have the same issue.
https://jsfiddle.net/couthzLt/
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center d-block">
<h5 class="modal-title d-inline-block" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
The header is not completely centered as you can see on this image that:
modal header centered relative to X
My question is if it's possible to center it to the right edge of the modal - not the X.
By default close is positioned using float:right which keeps it as part of the document flow. Because of this modal-title is always going to center itself respective of the width available minus what close is using.
To fix the problem we need to pull close out of the flow. Easiest way to do that is:
.close {
position: absolute;
right: 1rem;
}
position: absolute pulls the class out of the normal flow which in turn lets modal-title take up the full width. The right margin is designed to replicate the margins defined for the Modal component to ensure that your layout remains more or less unchanged.
Put text-center d-block in modal-header
Put up button dismiss
Last modal title.
<div class="modal-header text-center d-block">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title">Title center</h2>
...
</div>
How about something like this:
#exampleModalLabel {
position: absolute;
left: 0;
right: 0;
margin: auto;
}
On my side, I did the following:-
NOTE: The size of my modal was default, it was not large or small.
Then in Modal::begin I added titleOptions as below
Modal::begin([
'title' => 'yor title ...',
'titleOptions' => ['style' => ['margin-left' => '95px']],
...other options..
]);
Anybody know bootstrap modal background issue?
flickering background pixels
jsfiddle
HTML
<!-- Button trigger modal -->
<button type="button" id="mymodal" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
<!-- Modal -->
<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>
I changed .fade.in opacity property on bootstrap.min.css from 1 to 0.99: .fade.in{opacity:0.99}
and that solved the problem while a better solution appears.
* update*
try this on bootstrap.min.css
.fade.in{opacity:1;-webkit-backface-visibility: hidden;}
It looks like bug in bootstrap,
i got the same issue and i found out that it caused by elements on the page that got opacity property.
i manage to reproduce it on bootstrap site
hope it will help you.
furthermore, it happen only on chrome.
I am trying to make a Bootstrap modal, but right now when I open it up it inserts the html from the entire page and inserts it into my modal. I copied the sample modal straight from w3schools and I'm not using any JQuery to dynamically update it or anything.
When the modal is hidden the html shows me the correct structure: My navbar, content, then the hidden modal with the proper modal content. When I show the modal everything messes up. The same structure exists with the navbar, then content, then modal (not hidden as it should be). However, this time inside the modal is the html from the rest of the page repeated. A second modal along with the correct modal content is buried inside of the repeated html content, but it is also hidden. The result is that I see two versions of the body content, one in front of the other. When I hide the modal everything goes back to normal.
In other words this:
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- 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>
Keeps getting changed to this:
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<meta></meta>
<title></title>
<script></script>
<div class="navbar"></div>
<div class="container"></div>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- 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>
I should also point out that it does not duplicate tags such as head or body. It really doesn't make sense to me why the inside of the modal div is being changed at all when I want it to remain static. Any help is appreciated, thank you.
I have the following Modal:
<a href="somepage.htm" data-toggle="modal" data-target="#extLinkModal">
<div class="modal fade" id="extLinkModal" tabindex="-1" role="dialog" aria-labelledby="extlinkModalLabel" aria-hidden="true" data-backdrop="static">
<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="extLinkModalLabel"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
When I click the link to launch modal, the content of somepage.htm overflows out of the modal and there are no scroll bars on the modal?
How come this is happening?
Let's say you have 2 pages, index.htm and somepage.htm
you have modal in page index.htm and you want to show somepage.htm inside modal. Then
index.htm page code will be
<a href="somepage.htm" data-toggle="modal" data-target="#extLinkModal">
<div class="modal fade" id="extLinkModal" tabindex="-1" role="dialog" aria-labelledby="extlinkModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog " role="document">
<div class="modal-content">
//Here you can show the content from `somepage.htm`
</div>
</div>
</div>
and somepage.htm page content will be
<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="extLinkModalLabel"></h4>
</div>
<div class="modal-body">
//Put the page content here
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
This will resolve the issue somepage.htm overflows out of the modal and there are no scroll bars on the modal
Alternate Solution
OP asked in comments to load the remote page content into modal-body and above code example is default behavior of bootstrap v3+ where modal ignores the modal-body and always load the remote content into <div class="modal-content"> doesn't matter even if <div class="modal-body"> exist inside the <div class="modal-content">.
To get around this and make sure that the remote content load inside <div class="modal-body">
Use bootstrap modal events
Do not use href or remote in modal call button or link
So the modal call button or link will be
<a datalink="somepage.htm" data-toggle="modal" data-target="#extLinkModal" class="btn btn-primary">
where href changed to datalink or any word can be used but not href or remote otherwise modal will detect it as remote content and ignores the <div class="modal-body"> and load the content into <div class="modal-content">
Modal HTML
<div class="modal fade" id="extLinkModal" tabindex="-1" role="dialog" aria-labelledby="extlinkModalLabel" aria-hidden="true" data-backdrop="static">
<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="extLinkModalLabel"></h4>
</div>
<div class="modal-body">
//Remote Page Content loads here
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
and JS
<script>
$(document).ready(function() {
$("#extLinkModal").on("show.bs.modal", function(e) {
var link = $(e.relatedTarget);
$(this).find(".modal-body").load(link.attr("datalink"));
});
});
</script>
The content of somepage.htm overflows out of the modal because your somepage.htm page is not responsive, and your modal have some fixed height and width. So try to make your page responsive using bootstrap classes and some additional css if needed.
So making somepage.htm page content responsive will solve both problems of content overflows out of the modal as well as scroll bar.
Hope it will help you!
On this example: HTML / CSS Popup div on text click
How can I make this load on the index page when they visit the site the first time. I don't want a button to click, I want this load automatically; and then have a close button when they read the content on the popup. Thanks in advance.
Hi you can do this using bootstrap model popup
for this include bootstrap css and js files and use below code
Your Html Code
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" arialabelledby="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" id="myModalLabel">Intorduction</h4>
</div>
<div class="modal-body">
Body Text
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
then use this script
<script>
if (localStorage.getItem('showModal')!='yes')
{
localStorage.setItem('showModal','yes');
$('#myModal').modal('show');
}
</script>