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;
}
Related
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
Here is my problem. I have a carousel that act like a menu also. When the amount of tabs is higher than the space of width available on your browser, the carousel-controls appears. Everything works fine. But I added as well a dropdown menu on each tabs and here is the thing. If I put overflow:visible, we can see the tabs sliding in and out of the div, which is very ugly.
If I put overflow:hidden, the slider works fine, but then, I can't see anymore my dropdown menu since they are hidden vertically as well. I tried to put overflow-y: visible and overflow-x:hidden but this won't work because if the "x" is visible, it will be considered as auto if the "y" is different. In other words, my slider works, but there is a scroll bar added to show my dropdown, which is very ugly.
I saw on another post to wrap it around a larger container, and I only hide the "x" while my "y" will fall back into the larger container. I can not do that since my carousel will break if the structure is not maintained.
So my question is : How can I do so that my slider looks good (we don't see the tabs sliding in and out) as well as my dropdown menu is showed up!
Here is the link if you want to check this out : https://decktogo.com/pages/downloads_user-manual_brochures
On large screen, you won't see anything wrong. Resize your browser window so that the width of it is around 380px. The slider will come in play and you will see the mess.
If you want my code, you can right click and inspect my website page to look at all the code there.
Thank you for your help,
Jonathan
Problem solved! Unfortunately, it didn't seem to have a good answer for that. So I did an overflow-x: hidden so that my carousel works fine. To solve the dropdown problem, I put a height:400px with margin-bottom:-300px which result in the good final looking with all what it supposed to be. It is just unfortunate that overflow-x and overflow-y doesn't work in that way.
.download .carousel-inner.onebyone-carosel {
margin:0 40px;
overflow-x:hidden;
width: auto;
height: 400px;
margin-bottom:-300px;
z-index: 4;
}
.download .carousel-inner{
overflow: initial;
}
I am having a problem when I open a Bootstrap modal, it sort of moves the entire website a bit. I checked this question out, but adding .modal-open { overflow: scroll } did not help me, as yes, it made it keep the right side scroll bar, but the problem was not that it disapeared, just that it moved the whole website a little to the right - this also resulted in a bottom scrollbar, affecting the footer.
I am basically just looking for a conclusion where triggering a Bootstrap modal does not move my entire website, this gif demonstrates it;
I have not added other custom css affecting the .modal-open other than overflow: scroll. Although I have tried setting it to overflow: auto and hidden ect., nothing really helped.
It looks like problem with overlay - can you check out it's styles?
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 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.