I have a simple pop up modal in my page, I want this modal to stay when scrolling the page.
Here is my modal
<div class="modale" id="ouibounce-modal" style="display:none">
<button type="button" id="pop_up_close" class="close" data-dismiss="modal">×</button>
<img id="pop_up" src="images/caly_popup.png">
</div>
Here is my solution
.modale {
height: calc(100vh - 126px);
overflow-y:scroll;
}
this is not working, what do I need to do to get this working?
Try this
.modale {
height:100vh;
overflow-y:scroll;
position: fixed;
background: red;
width: 100%;
left: 0;
right: 0;
top: 0;
margin:auto;
}
<div class="modale" id="ouibounce-modal">
<button type="button" id="pop_up_close" class="close" data-dismiss="modal">×</button>
<img id="pop_up" src="images/caly_popup.png">
</div>
Related
I have the following code where I have a (variable) number of buttons in a container, the buttons' position is adjusting correctly to the width of the container when resizing the screen, but what I want to achieve is at some breakpoint, the buttons should stop repositioning themselves and instead give the container an overflow-y scroll, and keep the buttons in their positions.
.container {
max-width: 800px;
background-color: beige;
}
.btn {
width: 80px;
}
.btn span{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
<div class="container">
<button class="btn"><span>test</span></button>
<button class="btn"><span>test123</span></button>
<button class="btn"><span>test450354053</span></button>
<button class="btn"><span>test23R02020202</span></button>
<button class="btn"><span>test33030494</span></button>
<button class="btn"><span>test403930390</span></button>
<button class="btn"><span>test</span></button>
<button class="btn"><span>test23423049</span></button>
<button class="btn"><span>testé</span></button>
<button class="btn"><span>test2340</span></button>
<button class="btn"><span>test234234</span></button>
<button class="btn"><span>test2342</span></button>
<button class="btn"><span>test2342020</span></button>
<button class="btn"><span>test2202349</span></button>
<button class="btn"><span>testé</span></button>
<button class="btn"><span>test234029</span></button>
<button class="btn"><span>test20203030</span></button>
<button class="btn"><span>test340</span></button>
<button class="btn"><span>test234240</span></button>
<button class="btn"><span>test2342340</span></button>
<button class="btn"><span>test23420420</span></button>
</div>
In this specific example a min-width with the given breakpoint (e.g. 400px) and overflow: auto set on the .container will work fine
.container {
max-width: 800px;
min-width: 400px;
overflow: auto;
background-color: beige;
}
.btn {
width: 80px;
}
.btn span{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
<div class="container">
<button class="btn"><span>test</span></button>
<button class="btn"><span>test123</span></button>
<button class="btn"><span>test450354053</span></button>
<button class="btn"><span>test23R02020202</span></button>
<button class="btn"><span>test33030494</span></button>
<button class="btn"><span>test403930390</span></button>
<button class="btn"><span>test</span></button>
<button class="btn"><span>test23423049</span></button>
<button class="btn"><span>testé</span></button>
<button class="btn"><span>test2340</span></button>
<button class="btn"><span>test234234</span></button>
<button class="btn"><span>test2342</span></button>
<button class="btn"><span>test2342020</span></button>
<button class="btn"><span>test2202349</span></button>
<button class="btn"><span>testé</span></button>
<button class="btn"><span>test234029</span></button>
<button class="btn"><span>test20203030</span></button>
<button class="btn"><span>test340</span></button>
<button class="btn"><span>test234240</span></button>
<button class="btn"><span>test2342340</span></button>
<button class="btn"><span>test23420420</span></button>
</div>
I've got an issue here where I have a vertically scrolling div fill of buttons and on iOS/Safari, the focus is very unpredictable. Sometimes when you touch/scroll in the div area, the page itself scrolls. Other times it behaves as it should and scrolls the contents of the div.
I cant have the page scrolling. Any ideas? I have tried everything I can think of and no luck yet.
Any help would be greatly appreciated. I am stumped!
Here is a link that demonstrates the problem so you can try it yourself on an iOS device: https://alcatraz.fawkesengineering.com/tavis/ics-fabriceditor/touch-scroll-ios-issue.html
Heres the code:
<!DOCTYPE html>
<style>
body, html {
margin: 0;
color: white;
height:1000%;
}
.bodyText {
position: relative;
left: 10px;
top: 10px;
font-family: "Arial", Verdana;
word-wrap: break-word;
overflow-wrap: normal;
}
.rightnav {
background-color: #333;
overflow: auto;
white-space: nowrap;
position: fixed;
top: 0;
right: 0;
width: 150px;
height: 100%;
vertical-align: middle;
padding-left: 50px;
-webkit-overflow-scrolling: touch;
}
.rightnav button {
display: block;
padding: 20px;
margin: 5px;
margin-bottom: 100px;
}
.container {
width:100%;
height:100%;
border:1px solid;
}
.left {
width:auto;
height:100%;
background:#444;
padding: 10px;
padding-right: 100px;;
}
.right {
overflow: auto;
height:100%;
width:250px;
background:#444;
float:right;
}
</style>
</head>
<body id='body' ontouchstart="">
<div id="mainmenu" class="rightnav" >
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
</div>
<div class="container">
<div class="right"> </div>
<div class="left">
<span class = "bodyText" >Tap here and then try to scroll on the right . <br>
The focus is unpredictable. <br> Sometimes the contents in the div will scroll,
other times the page will scroll.</span>
</div>
</div>
</body>
Both are separate div, In DOM div with id mainmenu will come first then div with class container.
if you are clicking on somewhere div with id mainmenu or cursor/focus is there then it will scroll div with id mainmenu then div with class container as well.
if you are clicking on somewhere div with mainmenu or cursor/focus is there then it will scroll div with class container only.
Summary: It behaves as expected in safari 16.2
I can't seem to get the footer in my modal to be fixed at the bottom with the content scrolling underneath.
<div id="children-modal" class="modal" materialize="modal" [materializeParams]="[{dismissible: false}]" [materializeActions]="modalActions">
<div class="modal-content">
<h4 id="modal-title">What to do with your god damn kids</h4>
<p id="modal-text">A bunch of text</p>
</div>
<div class="modal-footer">
<a id="close-modal-button" class="right waves-effect waves-white btn-flat" (click)="closeModal()">Close</a>
</div>
</div>
.modal {
width: 95%;
padding: 0px;
}
.modal-content {
height: auto !important;
padding: 0px;
}
.modal-footer {
position: fixed;
}
The footer disappears. Any ideas?
I'm building off of sunil's answer. In addition to using bottom: 0, you need to set a height and remove the overflow on your .modal class. Next, set the height and overflow to auto on the content like so:
.modal {
position: fixed;
left:0;
right:0;
background-color: #fafafa;
max-height:70%;
height: 70%;
margin:auto
border-radius:2px;
will-change:top,opacity;
}
.modal-content[_ngcontent-c0]{
height:90%;
padding:0;
overflow: auto;
}
In short, you want it to scroll the content (and not the footer) so this is where you place the height and overflow (scrollbar).
You need to give bottom: 0; to your modal-footer class.
I have a modal that I resize it.I want large width size of modal and horizontally centered.
In addition when I resize it to smaller it's correct.
<style>
#PopupModel {width:60%;}
.modal {
}
.vertical-alignment-helper {
display:table;
height: 100%;
width: 100%;
}
.vertical-align-center {
/*/To center vertically*/
display: table-cell;
vertical-align: middle;
}
.modal-content {
/*Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it*/
width:inherit;
height:inherit;
/*To center horizontally*/
}
</style>
<div class="modal fade" id="PopupModel" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel" >
<div class="modal-dialog" role="document" >
<div class="modal-content" >
<div class="modal-header">
<h4 class="modal-title" id="gridSystemModalLabel">Product Define</h4>
</div>
<div class="modal-body" id="modelResult">
<br />
</div>
</div><!-- /.modal-content -->
<div class="modal-footer">
<div class="">
<button type="submit" class="btn btn-primary" style="width: 100px; height: 38px;">save</button>
<button type="button" class="btn" data-dismiss="modal" style="width: 70px;height: 38px; ">cancel</button>
</div>
</div>
</div><!-- /.modal-dialog -->
</div>
I test some ways but not worked for me .any help ?
your current code in jsfiddle would help out a lot but can you try:
.modal {
width: 600px; //size of modal
margin: 0 auto;
}
option 2:
if you've no issues using flexbox, refer to the answer on this one Flexbox: center horizontally and vertically
This may be a tad late, but the simplest way of aligning the modal in the center of your screen is to use the vertical-align: middle; property inherent to inline elements.
Please remove all extra formatting you have added to the basic Bootstrap modal and add the following CSS:
.modal {
text-align: center;
}
.modal::before {
content: "";
display: inline-block;
height: 100%;
margin-right: -4px;
vertical-align: middle;
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
Please keep in mind that I am using Bootstrap 3 and the above CSS may or may not work with a Bootstrap 4 modal.
Original solution: http://www.learnsourcecode.com/blogs/align-bootstrap-modal-center-of-screen-vertically
I had this issue with .modal-lg and .modal-xl in Bootstrap 4.2.1. I simply added:
.modal.modal-lg, .modal.modal-xl { max-width: unset !important; right: 0; }
For some reason this worked perfectly, though buyer beware, I haven't had a chance yet to test this extensively. If anyone sees or has a problem with this, I'd like to know.
I got exactly the same problem and just found the solution!
This is how I solved it.
#media (min-width: 576px) {
.modal-dialog {
max-width: 600px;
}
}
Hope it's helpful!
Simply use text-align: center
.modal-header, .modal-footer {
text-align: center;
}
<style>
#PopupModel {width:60%;}
.modal {
}
.modal-header, .modal-footer {
text-align: center;
}
.vertical-alignment-helper {
display:table;
height: 100%;
width: 100%;
}
.vertical-align-center {
/*/To center vertically*/
display: table-cell;
vertical-align: middle;
}
.modal-content {
/*Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it*/
width:inherit;
height:inherit;
/*To center horizontally*/
}
</style>
<div class="modal fade" id="PopupModel" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel" >
<div class="modal-dialog" role="document" >
<div class="modal-content" >
<div class="modal-header">
<h4 class="modal-title" id="gridSystemModalLabel">Product Define</h4>
</div>
<div class="modal-body" id="modelResult">
<br />
</div>
</div><!-- /.modal-content -->
<div class="modal-footer">
<div class="">
<button type="submit" class="btn btn-primary" style="width: 100px; height: 38px;">save</button>
<button type="button" class="btn" data-dismiss="modal" style="width: 70px;height: 38px; ">cancel</button>
</div>
</div>
</div><!-- /.modal-dialog -->
</div>
This works for me.
Adjust top and left values to make model at center as per your needs.
.modal {
position: fixed;
top: 15%;
left: -20%;
}
References: https://gist.github.com/emerico/9127830fe2496c44c116fe600f9097bf
I am trying to put a spinner to the left of the boostrap3's modal dialog box's footer, but it hovers on top of one of the buttons, What am I doing wrong here?
<div class="modal-footer">
<!-- Spinner -->
<span style="text-align: left" id="wait-spinner"></span>
<!-- Cancel and Save changes button -->
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button class="btn btn-primary" onclick="SaveEditChanges()">Save changes</button>
</div>
and here is the wait-spinner css:
#wait-spinner {
display: none;
position: absolute;
width: 35px;
height: 35px;
text-indent: -9999em;
}
from your code its clear #wait-spinner is following position absolute in the div which have button
use <span style="text-align: left" id="wait-spinner"></span>
just inside the box or pop up where you want it with
#wait-spinner {
display: none;
position: absolute;
width: 35px;
height: 35px;
top;50%;
left:50%:
text-indent: -9999em;
}