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
Related
I've been trying to follow the the guide below:
https://bootstrapious.com/p/bootstrap-sidebar
I want my layout to be the following:
where the black bar is a navigation that hides away using negative margins, the top bar grows in width when the left bar is hidden. The white space is for my content which goes into a container for bootstrap grid.
However current my layout like this:
The blue bar flex's to the right but doesn't go to the top of the page
My HTML:
</head>
<div class="wrapper">
<header class="skin-josh">
<nav id="sidebar">
<div class="page-sidebar sidebar-nav">
<li class="active">
#if(isset($id))
#include('layouts._leftmenu')
#else
#include('layouts._leftmenu_noproject')
#endif
</li>
</div>
</nav>
</header>
<nav class="navbar fixed-top navbar-light bg-light" role="navigation">
#if (session()->get('projectname'))
<h3 style="float:left;color:white;padding-left:25px;">{{ session()->get('projectname') }}</h3>
#endif
<div class="burgernav" style="float:left;height:65px;padding-left: 5px;">
<button class="btn btn-secondary" type="button" id="sidebarCollapse" style="background-color:rgb(0, 131, 185);color:white;height:65px;">
<i class="fas fa-bars fa-lg"></i>
</button>
</div>
</nav>
<body id="content">
#yield('content')
</body>
</div>
My CSS:
wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
min-width: 150px;
max-width: 150px;
min-height: 100vh;
vertical-align : top;
}
#sidebar.active {
margin-left: -150px;
}
.sidebar {
min-height: 92.58vh;/*100vh;*/
display: block;
width: 150px;
}
.left-side{
width:150px;
min-height:100vh;
}
.navbar {
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 0;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
You can set the black div to have position: fixed, and then create a new div after the header wrapping all the div below it, with a margin-left equals to the width of the black div.
And dont need the display: flex in the .wrapper after that.
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
So I created a drop-down menu using only CSS and I've positioned them on my header and footer, my problem is how can I make my menu display above my button instead of under it(only for footer button). Any ideas?
CSS
.d_button {
color: #FFFFFF;
background-color: #222222;
border: none;
cursor: pointer;
font-size: 80%;
font-weight: bolder;
line-height: 50%;
padding: 8px;
}
.drop_top {
position: inherit;
display: inline-block;
background-color: #222222;
float: right;
}
.drop_bot {
position: inherit;
display: inline-block;
background-color: #222222;
float: left;
}
.drop_content {
display: none;
position: absolute;
right: 14px;
background-color: #222222;
min-width: 80px;
}
.drop_content a {
color: #FFFFFF;
padding: 5px;
text-decoration: none;
display: block;
}
.drop_content a:hover {
color: #03A9F4;
}
.drop_top:hover .drop_content {
display: block;
}
.drop_bot:hover .drop_content {
display: block;
}
<div id="header_container">
<div id="header">
Header Content
<div class="drop_top">
<button class="d_button">
<div id="nav_icon" class="top">☰</div>
</button>
<div class="drop_content">
A
B
C
</div>
</div>
</div>
</div>
<div id="container">
<div id="content">
</div>
</div>
<div id="footer_container">
<div id="footer">
Footer Content
<div class="drop_bot">
<button class="d_button">
<div id="nav_icon" class="bottom">☰</div>
</button>
<div class="drop_content">
A
B
C
</div>
</div>
</div>
</div>
Thanks
Ok so first things first is that this dropdown that you have will more than likely not work because your dropdown menu will only show when you hover on the button and not when you hover on the actual dropdown menu. So your dropdown menu will appear but when you go to try and click on the links once you remove the cursor from the dropdown button the menu disappears. That being said to create a css dropdown menu you will want to wrap both the dropdown button and the dropdown menu in a container and then position this container as relative. Then you can position the dropdown menu as absolute and you can control the position of this absolute positioned div inside the relative positioned div with top, right, left, and bottom in your css. Hopefully that makes sense. So I have created a fiddle for you to view the proper technique for createing a dropdown menu.
Here is the fiddle Fiddle
First you will start with the following markup for your dropdown menu
<div class="dropdown">
<button class="dropdown-button">☰</button>
<div class="dropdown-menu">
Link
Link
Link
</div>
</div>
Then the following Css:
.dropdown{
position:relative;
}
.dropdown-menu{
position:absolute;
top:100%;right:0;
min-width:80px;
background:#000;
display:none;
}
footer .dropdown-menu{
bottom:100%;top:auto;left:0;right:auto;
}
.dropdown:hover .dropdown-menu{
display:block;
}
.dropdown-menu a{
display:block;
color:#fff;
padding:5px;
text-decoration:none;
}
.dropdown-button{
border:none;
background:#222;
color:#fff;
outline:0;
cursor:pointer;
padding:10px;
}
header .dropdown{float:right}
footer .dropdown{float:left;}
Then you can see in this css I have positioned the footers dropdown menu to have the following css bottom:100%;top:auto;left:0;right:auto; so you can control the placement of an absolute positioned div inside of a relative positioned div accordingly.
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;
}