Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unnecessary scrollbar #211

Open
Julix91 opened this issue Jan 21, 2017 · 2 comments
Open

Unnecessary scrollbar #211

Julix91 opened this issue Jan 21, 2017 · 2 comments

Comments

@Julix91
Copy link

Julix91 commented Jan 21, 2017

Update: Found issue, it was in the modal.css code, see second post. Why is that html y-overflow rule there?

First off, thanks for making it. Didn't realize how much was possible without js nowadays.
I'm working on a page, with HTML+CSS only, for a class.

However, now I have a scrollbar at the side that's trying hard to stay there, even though based on it's grayness it knows it's not needed.

scrollbar

I eventually found if I comment out the reference to the css modal file it goes away

noscrollbar

And of course reveals the content that was previously hidden by the modal, showing if it was still somehow being rendered it would be overflowing, but as far as I tested setting overflow:hidden various places didn't help either... I'm currently using flex-box for my general layout. I uploaded the code to a repository , if you prefer seeing code that way, or you can go on the page on my server, see it working and inspect it with debugging tools.

Any help is appreciated, but the error may well be somewhere on my part, and I haven't done all I could do to triage the error yet, other than noticing it stopped happening when commenting out css modal. - I'll definitively keep playing with it myself as well... wonder if it's a flexbox interaction.

Greetings,
Julix

@Julix91
Copy link
Author

Julix91 commented Jan 21, 2017

Update: I reduced it to a few lines of content, and only the modal.css and it still happened... see better example page. then I realized, even though I didn't indent to, I may have changed the modal.css file at some point, so I look in it again for the first time in a long time and see:

html {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; }

Don't remember adding that, maybe it was part of it originally? Anyway, pretty clear what I should do about it... (i.e. comment that out and it works! :) ) -- oh and I declared modal css later than my css - thus why changing the rules in my file didn't make a difference.

Oh the head-scratching, I was so sure it was something in my file... Haha

Update II: Confirmed its from your code, but didn't manage to find out why it's there to begin with. What's up with that? How is it necessary / a good idea for modal css to come with that rule for html?

@Julix91 Julix91 closed this as completed Jan 21, 2017
@Julix91 Julix91 reopened this Jan 21, 2017
@Firegarden
Copy link

I have the same issue - when I use the modal there is a scroll bar that is not needed. Can you please help us understand why this scroll bar is necessary? The css that causes this is html {
overflow-y: scroll;

Thank you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants