I have created a dialog box that is aligned to the middle of the screen using a combination of position:fixed, overflow:auto and display:table, as follows:
.dialog {
position: fixed;
left: 0; right: 0;
top: 0; bottom: 0;
z-index: 1000000;
background-color: rgba(193, 208, 145, 0.75);
text-align: center;
overflow: auto;
}
.dialog > div {
display: table;
width: 100%;
height: 100%;
}
.dialog > div > div {
display: table-cell;
vertical-align: middle;
}
.dialog > div > div > div {
display: inline-block;
text-align: left;
min-width: 300px;
max-width: 640px;
border: 1px solid #004000;
background-color: #e2ffcd;
border-radius: 6px;
}
Demo
This works to good effect, however a problem is encountered when the contents of the dialog box are larger than the screen - this happens fairly often on mobile devices, but it can also happen on desktop in certain cases depending on contents.
When this happens, scrolling becomes awkward. On desktop, the user sees two scrollbars, and using the mousewheel will scroll the page behind the dialog box if the dialog itself has reached the end. On mobile, it seems to take some serious persuasion for the touchscreen to understand that the user wants to scroll the dialog, not the entire page. Testing on my 3DS Browser was the worst as the circle-pad would scroll the entire page, not the dialog.
How might I go about improving this situation? Ideally I'd want the page's contents to be locked in place while the dialog itself sort of "becomes" the main page for the purposes of scrolling. Note that the dialog is created by JavaScript, so JS-based solutions to this problem are acceptable.
Related
In my popup window, all info and inputs are usually fully displayed when first triggering it, however, I have a textArea box that I can expand to whatever height. Upon expansion, I want the entire popup to scroll on the page, not just that particular div which holds the expanded textArea.
I'm using this bit of CSS to make my popup window full height and scrollable when I expand the textArea.
.cdk-global-overlay-wrapper {
display: flex;
position: absolute;
z-index: 1000;
overflow: auto;
pointer-events: auto;
padding-top: 100px;
margin-bottom: 100px;
}
Everything worked as intended with that bit of CSS, however, I noticed that the popup no longer closes when clicking the overlay, and it's due to the pointer-events: auto, but removing this bit of CSS brings me back to square one where the popup doesn't scroll with the page when I expand the textArea.
Any ideas on the quickest, cleanest way to have both behaviors?
Please use the below style.
.cdk-global-overlay-wrapper {
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
position: absolute;
z-index: 1000;
overflow: auto;
pointer-events: auto;
padding-top: 100px;
margin-bottom: 100px;
}
I am trying to imitate SO page behaviour of having a menu on the left and a bar on the top, both being sticky. The design is a sinle page dynamic application so when I say "switch pages" I am actually changing the html of a single page.
I create a menu as a list and a bar set them to be sticky as follows:
#topNav {
margin: 0px;
width: 100%;
height: 40px;;
overflow: hidden;
list-style-type: none;
color: white;
background-color: rgb(22, 16, 99);
position: sticky;
position: -webkit-sticky;
top: 0; /* required */
z-index: 1;
}
.menu {
margin: 0;
padding: 0;
padding-top: 20px;
position: sticky;
position: -webkit-sticky;
top: 40px; /* required */
border-right: 2px solid black;
}
However what is happening right now is, if there is a scroll bar, the menu is marginally (3 pixels maybe) more to the left than when there is no scroll bar. This creates a really ugly effect since switching between pages with little text to large pages moves everything just enough for it to be human noticeable. How can I prevent the scroll bar from re-formatting the text?
you can set overflow-y:scroll to that container. This makes the scroll always show irrespective of the content. So your content doesn't move around when switching pages.
Update: If you don't want the scroll to always show, you have to detect if the container has a scrollbar through javascript and append a class to your menu that would shift it to it's original position.
Here is a sample fiddle: http://jsfiddle.net/85a0sc4r/
I'm trying to disable scrolling on a web page when an user open a popup (but he can scroll it).
The popup element has following attributes:
#popup {
display: none;
width: 100%;
height: 100%;
z-index: 10;
position: fixed;
background-color: #3F3F3F;
overflow: auto;
left: 0;
top: 0;
}
And when the user opening a popup, the following code is called:
$('#popup').show();
$('html').attr('style', 'overflow: hidden;');
$('body').attr('style', 'overflow: hidden; position: relative;');
This solution perfectly work on a desktop browser, but unfortunatly not on mobile.
On mobile, it always possible to scroll (but the scroll speed is slow).
How can I disable also scrolling on mobile browser?
Thanks in advance.
Change body position to fixed. That will disable the scroll.
I have an application that displays an iframe that the user needs to be able to scroll on an iPad.
Apparently you can't scroll iframes and other elements by default on iOS unless you use the special -webkit-overflow-scrolling in the CSS.
So for example I have the following HTML (based on David Walsh's solution here: http://davidwalsh.name/scroll-iframes-ios)
<div class="frameContainer">
<iframe src="./frame.html"></iframe>
</div>
and the CSS:
*
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
html,
body
{
height: 100%;
background: #ff0000;
}
.frameContainer
{
position: absolute;
top: 40px;
left: 80px;
right: 80px;
bottom: 40px;
background: #ffffff;
overflow: auto;
-webkit-overflow-scrolling: touch;
/* removes spacing below iframe */
font-size: 0;
line-height: 0;
}
.frameContainer iframe
{
width: 100%;
height: 100%;
}
However you can cause the page (red area) to bounce and lose focus of the iframe by either flicking the page (around the iframe) or by varying the speed at which you flick (e.g. dragging with your finger slowly). Or by tapping on the page around the iframe.
Demo here: http://preview.na-software.co.uk/Demo/ipadscroll/
I've tried some plugins like: http://www.hakoniemi.net/labs/nonbounce/ to prevent the page bounce, but because it's an iframe, it still causes the page to have a bounce effect when interacting with the frame because it's a different document level. I've also tried bubbling up the touch events from the iframe to the parent level so the plugin catches it, but the page can still bounce.
I've been looking into sticking a "div" to the top of the screen when you scroll past it, or making the div scroll with the page when it reaches the top of the screen.
The issue i get when i try this matter is that changing to position: fixed; using either jquery or the simple css, removes the float from the element.
My layout look somewhat like this: http://jsfiddle.net/ThSXm/33/ <-- updated
So when the float is removed, the id="content" get's overlapped by the sidemenu, making the sidemenu bigger and out of place.
I need a solution where you dont have to alter the position of the elements or if there is some fix i can make on the content div so it wont get overlapped when changing the positions.
Update
Sandeeproop managed to help me with the positioning, but the scroll matter is still a issue.
As i mentioned in the comment for this question, the div has to scroll/stick to the top of the screen when the div is close to the top or reaches the top (and preferably stop once the div reaches the footer or is close to reaching the footer), because there are more divs (header/slideshow etc) before we reach the side menu, and you wont see the menu if you just use position: fixed.
Any thoughts?
/update
Looking forward to some answers!
//Jim
If i understand you question correctly.
Please check this fiddle.
#nav {
width: 136px;
position: fixed;
background: #FF0000;
margin-left: 1em;
margin-top: 1em;
}
#content{
width: 80%;
height: 600px;
background: #FF9966;
float: left;
margin-left: 170px;
margin-top: 1em;
}
You can set fixed margin-top values for nav and content elements.
Something like that http://jsfiddle.net/ThSXm/26/
#nav {
width: 15%;
height: 100%;
float: left;
background: #FF0000;
margin-left: 1em;
margin-top: 60px;
}
#content{
width: 80%;
height: 600px;
background: #FF9966;
float: left;
margin-left: 1em;
margin-top: 60px;
}
I guess what you are looking for is "position: sticky".
This is not yet supported by many browsers, but here is a pollyfill for it
http://philipwalton.github.io/polyfill/demos/position-sticky/
Have you considered a solution where you use position:absolute on the element?
Have it being absolute untill you need it to stick and then change it to fixed.
Here is a simple fiddle:
http://jsfiddle.net/dXe97/
if ($(this).scrollTop() > boxTop) {
$box.css({
'position':'fixed',
'top': 0
});
}else{
$box.css({
'position':'absolute',
'top': 150
});
};
The .box element is absolute positioned, but when you scroll down passed the element, it is changed to fixed and its top value is set to 0, and back again when you scroll up.