overflow hidden is not working when the input is focused
i put the classList for body no scroll when the component is opened,
document.body.classList.add('no-scroll')
it is working well, and in this component i made popup as full screen
so the background body is not scrolling.
BUT when the input is focused, the classList is not working. overflow hidden is not working
and the input is not focused classList no-scroll is working again
have no idea for this reason
--css--
body.no-scroll {
overflow: hidden !important;
}
how to fix this?
Related
I have a bootstrap modal popup on my page. The popup is a bit long so html adds the vertical scroll bar which doesn't look so good with the animation effect.
So, I want to remove this scroll bar but still be able to scroll.
Any help?
It may help you. Fixing the overflow hidden will remove the scrollbar, To get full content within the page use overflow auto to modal body
CSS:
.modal{
overflow:hidden;
}
.modal-body{
overflow:auto;
}
If you are using bootstrap version 4. You can use this css code.
.modal-scrollbar-measure {
overflow: hidden !Important; }
.modal class has overflow-y: scroll rule which results in scrollbar always visible.
https://stackoverflow.com/a/18715220/9143855
that because you use overflow : scroll ;
the scroll value of overflow property add scroll ball line to both sides vertically and horizontally you should use instead overflow auto which will just add one side scroll for which it needed the most
You can also use the modal events for this:
$("#modalID").on('shown.bs.modal', function(){
/* Hide the body scrollbar. */
document.body.style.overflow = "hidden";
});
$("#modalID").on('hidden.bs.modal', function(){
/* Show the body scrollbar. */
document.body.style.overflow = "auto";
});
the events can be seen here: https://mdbootstrap.com/docs/jquery/modals/events/
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.
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 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 a facebook like button in the caption part of a slideshow div, which is in the far bottom right. Obviously, the slideshow container has overflow: hidden, and when you click like the 'post to wall' bit pops up, below the like button. As expected, this is cut off.. but I need it to be visible. I have tried z-index and position: absolute with no luck.. any suggestions please?
You can see the site here: http://65.39.128.45/~apretty/category/habitat/
You need to put the like button outside the element with overflow: hidden since no children to an element with overflow: hidden can overflow the parent...