Git Product home page Git Product logo

Comments (15)

amorey avatar amorey commented on September 6, 2024

Are you seeing the bug on the documentation site (https://www.muicss.com) or on your own site? Can you paste in the HTML to reproduce it? I checked Firefox 39 on Linux 14.04 and Windows 7 and I'm not seeing bottom scroll bars at least on the documentation site.

from mui.

rockerBOO avatar rockerBOO commented on September 6, 2024

Both http://rockerboo.net/ and http://discovery.rockerboo.net/ have the issue. I do not think im doing anything special to the styling, but the grid seems to not be the right size for a brief number of width pixels.

Thanks amorey 😃

from mui.

amorey avatar amorey commented on September 6, 2024

Ok, thanks. I was able to reproduce it in Firefox on OS X. It looks like the problem is being caused by the padding on the <header> element. If you add the padding to the container instead, it should produce the same effect without causing the <header> to overflow.

from mui.

rockerBOO avatar rockerBOO commented on September 6, 2024

I don't think the <header> is causing it here. The width on the containers is set to a straight 768px at 768px, which doesn't account for the "dropshadow" on the panels, which causes it to be too big for the window.

from mui.

amorey avatar amorey commented on September 6, 2024

The panel is inside a container which has a padding of 15px so the panel itself shouldn't cause the overflow on the body. To test out if it's a problem with the panel, you can set the overflow property of the container to hidden to see if the overflow on the body goes away.

The container has a fixed width of 768px until the breakpoint at 768px at which point it has a fluid width (100% of parent) so that shouldn't cause the body to overflow.

Taking a closer look, the scrollbar appears at a viewport width of 777px and disappears at a browser width of 768px. I think what's happening is that at 777px, the container has a fixed width of 768px but the <header> has 1em of padding (10px) for a total width of 778px. At 768px, the container has a fluid width so the <header> no longer causes the body to overflow. So from 777px to 769px, the <header> is wider than the <body>.

from mui.

rockerBOO avatar rockerBOO commented on September 6, 2024

Thanks for taking an in-depth look. The header element is only one 1 of those 2 sites, and they both have the issue. Removing the whole header element doesn't solve the issue.

I have made an example to showcase it without all the extra things on the page. I was trying to isolate the issue down to some core thing, but it only seems to happen when it scrolls. Removing the width on the .mui-container for the 768 media query does fix it for me.

No-Scroll:
http://discovery.rockerboo.net/mui.html

Bottom Scroll in a grid:
http://discovery.rockerboo.net/mui-bottom-scroll.html

Bottom Scroll with just text:
http://discovery.rockerboo.net/mui-bottom-scroll-text.html

Thanks amorey 😄

from mui.

amorey avatar amorey commented on September 6, 2024

@rockerBOO It looks like the bottom scroll in Firefox is happening because Firefox takes into account the width of the vertical scrollbar when calculating the viewport width:
http://www.sitepoint.com/rwd-scrollbars-is-chrome-better/

If a vertical scrollbar is present at a viewport width of 769px then the body width is (769px - scrollbarWidth) while the mui-container width is 768px which causes horizontal overflow.

There are a few solutions to the problem. One solution is to decrease the size of mui-container-sm (and increase the gutter-width to enable a smooth transition from medium to small). Another solution is to compensate for the scrollbar width in JavaScript.

I'd like to spend more time thinking about it so I have a better sense of advantages/disadvantages of each approach. Let me know if you have some thoughts on how to fix the problem!

from mui.

amorey avatar amorey commented on September 6, 2024

@rockerBOO I subtracted 20px from $mui-container-sm to compensate for the width of the vertical scrollbar:
https://github.com/muicss/mui/blob/master/src/sass/mui/_variables.scss#L45

That prevents mui-container elements from causing the <body> to overflow but it also has the side effect of increasing their width from 748px to 767px (100%) as the viewport width transitions past the 768px breakpoint.

Bootstrap used the same solution so I think this might be the best way to solve the problem given the tradeoffs. It's fairly easy to calculate the scrollbar width in JavaScript and add a CSS rule to compensate for it but I'm hesitant to build this into MUI by default since it could cause screen jitter and it'd be better for the app to decide how/when it wants to modify the CSS.

The code is in master and will be part of the next release. Let me know if you have any thoughts.

from mui.

amorey avatar amorey commented on September 6, 2024

@rockerBOO The scrollbar problem is fixed in v0.1.20 #39

from mui.

rockerBOO avatar rockerBOO commented on September 6, 2024

Thanks amorey! I think this solution will be good. I have been really busy lately, but I will update to 0.1.21 soon and let you know. 😃

from mui.

amorey avatar amorey commented on September 6, 2024

Sounds great! Let me know.

from mui.

rockerBOO avatar rockerBOO commented on September 6, 2024

This seems resolved in my local version, will get it up soon. Will share when its up.

from mui.

amorey avatar amorey commented on September 6, 2024

Great! Let me know!

from mui.

rockerBOO avatar rockerBOO commented on September 6, 2024

Looks good. Here is it live now. http://discovery.rockerboo.net/

from mui.

amorey avatar amorey commented on September 6, 2024

from mui.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.