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.
Related
I have an browser app that dynamically shows content that can be shorter or longer than the available screen size.
On desktop browsers, this causes vertical scrollbar to appear/disappear, which makes the content "jump" left and right.
To avoid this, I add style="overflow-y: scroll" to the body tag, which forces the scrollbar to always display - the scrollbar is just disabled if the content is shorter than the screen.
The problem comes when I use the material-ui SwipeableDrawer component to show a sliding option menu. Viewing the DOM in the browser inspector, it seems material-ui actively removes my overflow-y styling on the body tag when it shows the menu, but then doesn't put it back when it removes the menu.
Example app published on Netlify
Source code
The screen-shot below shows the content is stable at first when the disabled scrollbar is visible, then shows the content jumping left/right after the menu has been displayed.
This only happens on desktop, reproduced with both Chrome and Firefox. It doesn't happen on mobile (iOS, for example) because the scrollbar on mobile devices is displayed "on top" of the content.
I don't want to track what material-ui is doing and add/remove padding - I'm pretty sure material-ui does this behaviour for other components as well (poppers, tooltips, etc.) Tracking all those components and fiddling with padding will be error-prone (not to mention tedious).
Can I somehow make the vertical scrollbar display "on top" of the content like it does in a mobile browser? I'd have to add padding to make sure nothing gets obscured, but at least it'd be static - so once the problem is fixed it'll stay fixed.
One possible workaround is to disable the scroll lock:
<SwipeableDrawer disableScrollLock={true} ... >
A downside of this is that you'll have to remember to do this everywhere you use any material-ui component that has the disableScrolllock functionality - so that means everywhere you use popovers, popups, etc.
But you can override the default props for components. The following worked for SwipableDrawer (because Drawer extends Modal):
export const theme = createMuiTheme({
props: {
MuiModal: {
disableScrollLock: true,
},
},
});
Note: the disableScrollLock setting appears to not be needed anymore with mui (i.e. material-ui version 5) - but you do still need to set style="overflow-y: scroll" in your root body element or somewhere similar.
One possible workaround is to
make the vertical scrollbar display "on top"
by setting the width of the body to the full view:
<body style="width: 100vw;">
This means the body element will extend all the way "underneath" the scrollbar (same as how it works on mobile browsers).
A downside of this is that content that appears on the right hand side of the screen may be obstructed by the scrollbar.
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?
The menu of the following website https://www.thedegreetracker.com/ has the following issue. The menu seems to be wider than the rest of the page. This is causing a horizontal scroll bar appear at the bottom of my browser's window. When one scrolls over (or maximizes the browser page on a very wide computer screen), it causes other parts of the page, such as the banner and the footer, to disappear when you scroll over.
By way of contrast, the following page does not have the same problem: https://www.thedegreetracker.com/about_us. This second page is how I want the first one to work in terms of the banner and footer resizing correctly, and no horizontal scroll.
As far as I can tell, the HTML and CSS code between the two pages is nearly identical. The differences I have found don't seem to make a difference. I have spent hours trying to figure out what is causing this issue and I am now asking for fresh eyes. I'm using Bootstrap 3 and Laravel, for what it's worth.
I'm hoping this is an easy fix that I'm just missing. You'll probably have more luck using Chrome Dev Tools on the actual web pages to figure this one out, but below is the HTML for both pages. As far as I can tell, the CSS is exactly the same for both pages.
Here's the code from the broken page with the wide menu and horizontal scrolling
view-source:https://www.thedegreetracker.com/login
Here's the code from the page with the menu, banner and footer that work correctly
view-source:https://www.thedegreetracker.com/about_us
The problem is the within the form, not the menu. You have wrongly used the container class (reserved by Bootstrap for setting width of page) inside your form.
Also, your form has a class of .container but you're overwriting the max-width property. This will likely cause responsiveness problems. Try not to touch width, max-width and min-width on classes that a framework uses for setting the width of content and layout, in general. If you must, use an inner-container.
Getting back to your problem, you should have probably used no class at all for your containers inside the form. As a rule of thumb, try to use class names that do not collide with the class names of your framework.
To fix your issue, either remove container from inside your form or, as a general patch for this type of error, add this CSS:
.container .container {
width: initial;
}
The sticky menu on our site (http://462184.hs-sites.com/) is experiencing issues on some pages and not others.
For example the homepage, if you scroll half way down the page and try to use the menu, it hides momentarily. On the other hand we don't get this issue when on another page such as (http://462184.hs-sites.com/bookkeeping-plans).
Therefore I can only imagine it is some type of element on those pages conflicting?
I've already modified the overflow: hidden, to be set to overflow: auto, and this works quite well in the .header-container, although it seems that although this fixes the problem, there is still the issue when this is set that the images (such as the iPad at the top of the page, then overlaps the next section below it).
Thoughts on how to make sure either the image extends the container so it doesn't run into the next one, or how to fix this once and for all?
Just a thought, could this possibly be the Javascript, as I noticed that the menu bar when scrolled down doesn't dissapear until hovering over an active/Javascript link in the nav bar.
Your support is greatly appreciated :)
If you put a console.log in your call:
if ($(window).scrollTop() > 500 && getScreenWidth > 767) console.log("true")
else console.log("false")
Do you see in your console log the value changing when you scroll down at your homepage? And is this the same output as on your bookkeeping-plans page?
and does it also appear if you remove the slideup and slidetoggle functions?
$(this).parent().siblings('.hs-item-has-children').find('.hs-menu-children-wrapper').slideUp(250);
$(this).next('.hs-menu-children-wrapper').slideToggle(250);
This is what I can think of that is conflicting your code based on what I see on your website
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;
}