I using twitter bootstrap modals on a one pager website. When I click on the button to open the modal, the background jumps to the top of the page and opens the modal. The same thing happens when you click the close buttons inside the modal.
I tried adding the code below to my CSS file. This stop the background from jumping to the top, however, I can now scroll through the background with the modal opened which I don't want as well. And also when my modal have overflows, I can see both the scroll bars for the modal and background.
body.modal-open {
overflow: visible;
}
Is there another way to solve this jumping problem without enabling the user to scroll through the background while the modal is opened?
If you have the height of either body or html is set to 100% as in my case, add the following to your CSS file:
html, body {
overflow: scroll;
}
The background now should keep its original position.
In case this helps anyone for this exact scenario, the following CSS solved the issue:
body.modal-open {
position: inherit;
overflow: visible;
}
body.modal-open .modal {
overflow: hidden;
}
The first block allows the page scrollbar to show and prevents the jump to the top when opening the modal. The second block stops the modal overflow adding its own second scrollbar.
Add following class in css:
.modal-opned {
overflow-y:hidden;
}
add it to body tag when modal is opened and remove it when modal is closed.
As I also struggled for days with this problem, my solution was simple - I played with the HTML and I found that when the modal was closing .modal-backdrop was causing the issue. So I simply commented out this from my CSS and everything is fine now. Use your Browser inspector for problems like this!
//.modal-backdrop + #app-wrapper {
//overflow: hidden;
//}
.modal-open{position: inherit}
This is because modal-open is a class added to body, when modal is opened. Make sure it's position is not fixed , If it's fixed make it inherit, that will help you to stay in the same place when popup is opened
You can use the following code and it should work fine:
<div class="modal" id="modelId" role="dialog" aria-hidden="true" data-backdrop="true">
<!--Model code -->
</div>
Assign the above id to any button or link and your model should load up just fine without any issues.
I had the same issue and removing href="#" solved it.
Related
I would like to hide the scrollbar if the the user is not scrolling, meaning if the user scrolls, the scrollbar should appear (only the scrollbar not the scroll track), while if the user does not scroll it should disappear. I sort of had that setup for a long time, but than I made some changes to my page and now the page always shows the scrollbar (if there is more content than one page can cover). Unfortunately I don't know what I did to make this feature go away? I played around with overflow in the css, but overflow: hidden just removes all scrolling possibilities. Here is a fiddle which shows my current setup
https://jsfiddle.net/jsmnsLm7/ (please make the window big, so that you can see all of the features of my navbar setup)
as you can see I use
overflow: hidden
in the body and
overflow: scroll
in the main.
thanks for your help
carl
try following css:
overflow:auto;
It worked for me :)
This will do what you're looking for
http://rocha.la/jQuery-slimScroll
Or you could just show the scrollbar when you hover over the area using CSS only;
This worked for me;
<style>
#ID {
overflow-y: hidden;
}
</style>
#ID:hover, #ID:active, #ID:focus {
overflow-y: auto;
}
</style>
<div class="ID"></div>
There isn't a way to do this outside of a scripting languege as far as I know, but the JavaScript you use for this is super simple.
Start off with a CSS style of:
#ID {
overflow: hidden
}
Then in your div in the HTML use this command
<div id="ID" onmouseover="this.style.overflow='scroll'"
onmouseout="this.style.overflow='hidden'"
this will cause your scroll button to appear when the user hovers over the div, but then disappear again when the user hovers away from the div.
If you are using bootstrap, it is pretty simple - There is a default Scroll class to which you can apply the style overflow: auto.
<div class="Scroll" style="overflow: auto" >
.......
</div>
Based on this https://stackoverflow.com/a/40857678/15992537 answer I made this:
.categorias::-webkit-scrollbar-thumb {
height: 6px;
background: #ff3d1d;
border-radius: 10px;
visibility: hidden;
}
.categorias:active::-webkit-scrollbar-thumb {
visibility: visible;
}
this worked in my case because my div is draggable, so the thumb shows when i drag and move it, but with JS you probably can make it apear based on events like page scroll for example.
use overflow: auto
The overflow property has the following values:
visible - Default. The overflow is not clipped. The content renders outside the element's box
hidden - The overflow is clipped, and the rest of the content will be invisible
scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
auto - Similar to scroll, but it adds scrollbars only when necessary
I have a class js-drawer-open that gets applied to the body & html when a drawer is triggered to open.
.js-drawer-open {
overflow: hidden;
}
This works perfectly on desktop to prevent content outside the drawer from scrolling when the drawer is open. However on IOS this doesn't work as the element inside the body are position:absolute. The only way I could get it to work was with the following...
.js-drawer-open {
height: 100%;
overflow: hidden;
width: 100%;
position: fixed;
}
But now my issue is if you scroll down the page and then open the drawer the page jumps back to the top of the screen which can be very frustrating for the user.
I think this is due to position: fixed being applied and I wanted to know if there is any way around this?
Any help would be much appreciated.
Maybe I'm missing something as you don't have a fiddle, but it sounds like your click event causes the jump to the top of your page. Take a look at: How to prevent a click on a '#' link from jumping to top of page in jQuery
I was reading source code of an template and i got code
<html class="js" style="overflow: hidden">
My question is why would someone will apply overflow:hidden on html tag. what benefit it will give.`
You would use overflow:hidden when you have dynamic, responsive content, for the most part, or at least, that is what I use it for. For example, if you have a page with content that grows in height as you shrink the page, you may want to just hide whatever is not visible in the regular height of the div
It's most likely to remove all scroll bars.
When you set overflow: hidden, anything that is outside of the element is hidden, obviously. What this does when you attach it to the html element is hides everything that is not on the screen. The browser then sees that because everything that is not on the screen is hidden, there is nowhere to scroll to, so it hides the scroll bars.
Templates that want a clean, full browser look will remove scroll bars if they feel that there is nothing that the user should need to scroll to.
Overflow hidden can be used to clear floats http://jsfiddle.net/PRwVT/1/ add
.wrapper {
border: 1px solid;
padding: 3px;
background: red;
overflow: hidden;
}
to overwrite the .wrapper class in that fiddle and you will see what I mean. That being said the only element that could have floats and be a direct child of the html element is the body tag.
This disables the page from scrolling. So for example when you might open an overlay on a page and you would like to be able to scroll the overlay content but not scroll the page behind it at the same time.
In this case you might add a class onto the html element that sets 'overflow:hidden' when you click a button to open the modal, then remove that class when you click the close button on the modal.
The modal would have to have a fixed position for this to work.
I have created a bootstrap modal,when it pops up the vertical scrollbar of the background page gets disable and contents of the background page move to their right side in the same amount of scrollbars width.So i want to avoid that move of the contents of page, and make background scrollable while modal is open? (note that i am using bootstrap 3.0.0 modal)
So,Please give me some hint to do that.Thank you in advance . . .
Change the CSS like this..
#myModal .modal-content
{
height:200px;
overflow:auto;
}
If you don't want the scroll bar on the entire modal, use modal-body instead:
#myModal .modal-body
{
height:200px;
overflow:auto;
}
Demo: http://bootply.com/88983
Here i come to know that when modal is opened bootstrap adds the 'modal-open' class to the body ,and then we can apply our css to this class.I have found solution for this by changing my css:
.modal-open{overflow:auto !important;}
I used overflow-y:auto; to create a scroll inside a box with text.
For some reason when I use it, it jumps back up!
Do you know what's the problem is?
(If it helps, the box is opened when mouse hovering a picture, but no problem here I think)
Try with:
overflow-y: auto !important;
To replace some previous CSS or try create a class in a css file
.boxscroll {
overflow-y: auto !important;
}
and in your html file:
<div class='boxscroll'></div>