I have a modal popup and I'm eliminating the scrollbar with overflow: hidden when the modal appears on screen.
I'm using js to calculate the scrollbar width and add a padding to fix the shifting screen when the scrollbar disappears. Something like so:
<div className='site-layout-wrapper' style={{'padding-right': modal ? `${scrollbarWidth}px` : '0'}}>
The problem is that there is also a slight shift when the scrollbar reappears. How do I solve it?
Don't use padding-right because the scrollbar width depends on the browser. What you can do is set the container to overflow: scroll; but set the content to overflow: hidden;. This will cause the scrollbar to always be displayed, but disable scrolling when the modal is open.
Example:
In your .css:
body {
overflow-y: scroll;
}
.site-layout-wrapper.modal-active {
overflow-y: hidden;
max-height: 100vh;
}
In your .jsx:
<div className={`site-layout-wrapper ${modal && 'modal-active'}`}>
Related
I fixed the height of the Bootstrap dialog, but for some reason a double scroll bar appeared, but I just needed to try overflow: hidden, but unfortunately it didn't solve the problem. The problem comes when I select a check box and the dialog jumps down since a longer part of the dialog comes in, I can't paste many codes because the components of the dialog are made up of several components.
So far I have done css formatting:
body {
overflow-y: hidden;
}
.dialog-layout-modal-body {
min-height: 662px;
max-height: 700px;
overflow: auto;
}
And the parent CSS code:
body {
overlfow: hidden;
}
Is there some bootstrap or css or any solution how can I fix this problem?
One is from browser scroll and another is from the dialog. Check if the Parent section has css property as 'overflow:auto;` which will cause this issue.
OR
you can do something like this for body tag.
body{
width:100%;
overflow-x:hidden; // hides bottom scroll
overflow-y:hidden; // hides vertical scroll
}
How do I make my div’s scrollbar always visible?
.el {
height: 100px;
overflow: scroll;
position: relative;
}
overflow: scroll is not working. It seems my browser’s native behavior does not allow that. (I’m on macOS.)
Is there some workaround?
P.S. The scroll bar is visible on hover, but I need it to always be visible.
It's a browser issue, the browser have there own style for these elements.
If scrollbar go to hidden, it's for the user comfort, you can't change this...
So you can try to make div scrollable with custom scrollbar plugin in jQuery for example :
https://github.com/gromo/jquery.scrollbar
This plugin create fake scrollbars in javascript and permit to user to scroll into element. So browser don't apply his own rules for these scrollbar because they aren't.
You could try
html {
height: 101%;
}
jsfiddle.net/etto2sdt/
What I'm trying to do is having a touch scrollable div. The body is set to 100% and I want to be able to scroll the contents inside #testnavwrapper
But it's not working... any ideas?
#testnavwrapper {
width: 100%;
overflow-x: scroll;
}
This will give you a horizontal scrollbar on the #testnavwrapper.
width: 2000px, as you put it, will have no effect as the overflow would occur on the body element (which has overflow set to hidden)
Hope it helps
I've added a sidebar tab "Subscribe" (jquery.tabSlideOut.v1.3.js) to my site (visit http://thecasket.co.uk/). Desktop browsers fine, but causes horizontal scrollbar to appear on iPad - and pages start sliding around. The tab has a negative absolute position (-290px, width + padding in my css for the slide-out-div) set in the javascript. On the iPad the scrollbar takes in the width of the slide div.
<div class="slide-out-div">
my subscribe form
</div>
.slide-out-div {
padding: 20px;
width: 250px;
background: rgb(255,255,255);
z-index: 9999;
-webkit-overflow-scrolling
}
I've tried adding: -webkit-overflow-scrolling: touch; but doesn't seem to do anything and I'm not really sure what this would do.
Any help on fixing the scroll, much appreciated.
As you don't define overflow:hidden to any parent container, the mobile devices expands the viewport to the size of the content. You you could go with this approach and set the overflow value or you can use position: fixed instead absolute on the slide-out-div. Both should do the trick.
Also note the text of the <a>-element with text-indent: -99999px; is "content", but I guess it should be "subscribe".
I'm a css noob, and though I want this DIV to resize when the window is resized, I don't want inner content to change the size of it.
Use the overflow statement. e.g.
overflow: hidden; /* all content hidden as it spills over */
overflow: auto; /* Scroll bars appear on div when required to allow moving around */
overflow: scroll; /* Scroll bars will be present at all times */
Try using:
div {
overflow: hidden;
}
Read more here.
set overflow: hidden on the containing div
Have you looked into CSS and the overflow directive? You can use this to tell the div to scroll or truncate/hide its content when the content is too large.