I have a bootstrap modal which has height more than the browser screen height. The requirement is that there should not be any vertical scroll bar for the modal exclusively. There can be one for the page. Another one is that the modal should move along with the background.
Now to achieve this and going through lot of similar questions I made the below changes to the modal class:
.modal{
position: from 'fixed' to 'absolute';
overflow-y: from 'auto' to 'hidden'
}
Although this solves my problems as no scroll bar is coming and the modal moves along with the background, the problem is that in smaller screens or screens having lesser resolution the content is getting lost/hidden. Adjusting the width is not a solution as I can never be sure what the resolution will be.
Thanks in advance.
May be your solution is below. just put these css to your stylesheet.
.modal-open{
overflow-y: scroll;
}
.modal-open .modal{
overflow-y: initial;
}
.modal{
position: absolute;
bottom:initial
}
View this live demo on jsfiddle
Related
I am using WordPress Twenty Seventeen for my website and I am having an issue with my header image on mobile. When I go to start scrolling, the header image kinda zooms-in, I have tried to google this issue but came up with nothing, I've tried going through the CSS code and don't see any transitions or the elements changing when I inspect them, Here is an example site:
https://2017.wordpress.net/
The header image is shorta zooms in when you start scrolling, is there away to prevent this so it stays the same size before scroll?
This is happening because mobile-chrome calculates the address bar into the viewport height and while scrolling webpage the address bar scrolls too and the visible area changes it's height dynamically.
E.g. on 320px X 360px screen, on mobile-chrome with address bar the height of viewport is 564px and after scroll when address bar disappears, the height of viewport changes to 620px.
Viewport Height with address bar
Viewport Height without address bar
Now image in .wp-custom-header taking min-height:100%;height:100% which will change height dynamically, therefore image changing it's dimension while scrolling.
Better way is to fix height of image in pixels in media queries.
.has-header-image .custom-header-media img{
height: 620px;
min-height: 0;
}
Similar issue:
css3-100vh-not-constant-in-mobile-browser
Add position: relative; to your cover img:
.wp-custom-header img {
position: relative;
}
The current position is fixed, which in conjunction with object-fit: cover;, is causing the zoom effect.
You can try following css:
html, body {
height:100%;
}
html {
overflow: hidden;
}
body {
overflow-y: scroll;
-webkit-overflow-scrolling:touch;
}
This will prevent the browsers from hiding address bar. So we will get rid of the jump while we scroll.
I have tried this in your url and it is working.
I suggest to use this in appropriate media queries.
I make the scrollbar on a page always visible with:
html {
overflow-y: scroll;
}
On the other hand, I also want the scrollbar height increase automatically when opening a modal dialog that is longer than the page. However, the scrollbar height does not increase automatically. If I set overflow-y: auto; this makes the scrollbar hidden for the initial state that I do not like. Any idea to fix it?
Bootstrap's modal does an excellent job of this by hiding body overflow and using a fixed overlay.
body.modal-open{overflow:hidden}
/* this is the overlay */
.modal{position:fixed;top:0;bottom:0;left:0;right:0;}
.modal .modal-dialog{/* taller than window */}
I'm having a responsive website which has the menubar as a sidebar (like FB app) which is fixed via position: fixed; to the right corner. This works fine so far except for iOS7 in combination with -webkit-overflow-scrolling: touch;. The fixed element does not stay at its position, moreover it jumps to the fixed position after the scroll is finished.
Does anyone of you have an advice?
Thanks
I've been struggling with exactly same issue for the whole day, the conclusion is, yes, there is a bug when you position an element as 'fixed' within a container with '-webkit-overflow-scrolling: touch' in Apple screen devices. And I couldn't find any work around. '-webkit-transform: translate3d(0,0,0)' nor '-webkit-backface-visibility: hidden' make any difference.
So finally i got it working by reassembling my html structure, so the fixed element is not within the scrollable container, is in an upper layer. Maybe not ideal if the 'body' is your scrollable container, but hoping it shed some light for a possible solution.
Extending it with a simplified example:
<body>
<sidebar></sidebar>
<div id="content-wrap">
<article></article>
<footer></footer>
</div>
</body>
And CSS would look like:
sidebar{
position: fixed;
}
#content-wrap{
-webkit-overflow-scrolling: touch;
}
Basically the bottom line is, don't position as fixed an element which exist within a scrolling touch container. You have to take it out if you don't want to deal with that iOS weird problem.
I was able to solve this problem by dynamically changing the -webkit-overflow-scrolling style to auto whenever a button was triggered to show the position: fixed div (which is inside the scrolling container).
I simply add the dont-scroll class.
.container{
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
.container.dont-scroll{
-webkit-overflow-scrolling: auto; /* The fix */
}
Once the position: fixed div is hidden (in my case, when a user clicks the 'cancel' button on the popup modal), I dynamically remove the dont-scroll class to enable the smooth scrolling once again.
Here's the situation. I'm building a webpage where i position an image on the right side of the page. When I make the browser window smaller, i want horizontal scroll bars to appear, so i include overflow: visible property. I also want the image to be positioned fixed so that when the page is scrolled down the content in the middle along with the background scrolls but the image stays as it is. But I am not able to bring both features to my page.The two properties seem to conflict each other. Is there a way around it?
Your code is too little.The problem of the front with the example of code.
try img fixed:
img.fixed{
position: fixed;
right: 10px;
top: 10px;
width: 100px;
z-index: 55;
}
I think you need to use css concept called media types....
you can not achieve this using only position:fixed
add this css to your page
#media all and (max-width: 699px), (max-height: 500px){
.overflowDiv{
position:fixed;top:100px;height:100px;width:100px;
overflow:scroll;
}
change max-width and max-height according to your need
here is jsfiddle demo
Hope it'll help you.
Thank you
this is the most stupid question here on stackoverflow...
My client would like to have always visibile sidebar in all pages of his website..
Some pages have scrolling, other no, so he see logo and element jump position from one page to another of the scrollbar width ...
so... there is a way to "lock" the scrollbar space, so the he don't see "jump" form one page to another?
thank you
html {
overflow-y: scroll;
}
forces the scrollbar to be shown always
use fixed position:
#sidebar {
position: fixed;
top: 10px;
left: 10px;
}
With the above, the container div will always stay 10 pixels from the top and left of the browser window. So when the page scrolls, it will not move.