In my page, I have a modal that opens when a button is clicked. But it looks wonky because two scrollbars show up:
The css I used: https://codepen.io/bootpen/pen/jbbaRa?editors=1100
I want it to have only the scrollbar for the modal when the modal is open and switch back to the parent scrollbar when closed. I tried doing it with overflow-y: hidden, but that disables scrolling instead.
What am I missing here?
Its not showing me two scrollbars when I see your project on Codepen
I think there is a problem with your Browser
Related
I'm having a similar problem to this here:Scroll bar not appearing?. My scrollbar is enabled using the comment overflow : auto. It's also working perfectly fine, if I use the top and down arrows on my keyboard. However the scrollbar is not visible on my modal window. I tried overflow-y: scroll as well as overflow-scroll.Didn't help. Any ideas whatelse I could try?
I'm in a Bootstrap 3.3.7 environment (no, I can't go to BS4 here unfortunately) and when opening a modal from a modal, the new child modal will not scroll.
I've tried other fixes such as assigning a height and overflow but the problem then is the modal is at a set height and will not scale with the window size so any responsiveness is thrown out the window.
Was able to make the scroll wheel control the scrolling in the child modal, but that isn't the greatest UX to use (and I had to hide the new scrollbar so there wasn't any duality there to cause confusion).
Bootstrap modal inside a modal; Cannot scroll after closing modal looked promising and addresses the issue of modal-open no longer being in the body tag. The problem is the script does not seem to work because modal-open is not being placed in the body tag when the child modal opens.
I am working with Bootstrap 3.3.1 modals and it was working perfectly until yesterday.
I'm using some modal windows on my page.
One of those modals is more long than the page. In a normal time, Bootstrap transparently hides the body's scrollbar and creates a scrollbar on the overlay. When the user scrolls on the modal, it is stopped when it reach the end. And the body doesn't moves at all.
But, yesterday, I was working on my modals and now it is completely buggy. I have no idea of the thing I introduced that destructs my modals.
First, Bootstrap applies an offset of 15px on the body, even on the small modals that have a height inferior to the screen height.
The content is uselessly shifted.
Second, the body keeps its scrollbar when a modal is displayed. And the overlay also have its scrollbar. So, I have an hideous double scrollbar on my page, and when the user scrolls at the end of the modal, the body scrolls too.
Also, sometimes (yes), the overlay is buggy and it scrolls with the body (so I can see the body without overlay at the bottom of the page).
I have no idea of what can cause this problem since it was working before.
Edit: Here is my code : http://pastebin.com/ePAcjri8. The position of the modals in the page has no effects on this bug (just after <body>, juste before </body>, etc).
I fill the modal content via Ajax when shown.
On JavaScript side, I'm just using .modal('show') then .html(html) to fill them.
Problem solved.
I think this issue can be caused by a lot of different reasons (see topics about this problem on the Internet, but alot have been fixed in Bootstrap releases), but in my case, I just had to remove this in my CSS:
html {
overflow-x: hidden;
}
Hiding the x or y overflow in <html> can cause the apparition of the double scrollbar.
i was just playing with the navbar of bootstrap and got into this design issue that bootstrap already seems to have. Just go to this example page that the site has: http://getbootstrap.com/examples/navbar-static-top/. Now resize the window to a smaller width till you get the navbar collapsed and click on the right icon where it shows the navbar elements in vertical fashion. Now click on the 'dowpdown' link so that it shows a dropdown. leave it as it is , dont click it again and resize the browser window to the previous full width. you might see the issue where the dropdown is below the content and is inside a overflow: auto type box. any answers how this can be solved?
I resolved this issue by adding the following to my custom CSS file which is loaded after the bootstrap css. Seems to have worked so far...
.navbar-collapse.in {
overflow-y: visible;
}
I added the facebook Like button to my website and am having an issue. When the Like button is clicked, the box that pops up doesn't overlay the other content like it does on most websites, instead creating a vertical scrollbar in the container (expanding it).
This issue actually exists on facebook's own website:
https://developers.facebook.com/docs/reference/plugins/like/
If you scroll about half way down the above page and click the Like button, the same issue happens:
The only difference there is that they have overflow set to hidden, instead of auto.
How can this be fixed?
Add to your CSS file:
.fb-like{overflow:hidden;}
This should solve the problem.