I've created a very basic mdl page and I expect the drawer component to have a variable about of content, almost certainly greater than the height of the page, so it will need to be scrollable. Unfortunately, something about the mdl framework stops the mouse wheel from working on the drawer component. You can even see this in the provided samples such as http://www.getmdl.io/templates/android-dot-com/index.html
I've tried setting the z-index of the drawer div to 999 and other such hacks but it still doesn't seem to work. You can use the scroll bar but that's hardly ideal. It seems to work by default in firefox but not in chrome or IE. Has anyone else dealt with this issue before?
This problem will be fixed with 1.0.6.
Refere https://github.com/google/material-design-lite/pull/1652
Related
I'm building a site for a client and man I'm having a hard time with CSS Scroll Snap in Chrome...
{{redacted URL}}
I'm using Chrome 109.0.5414.87 on OSX. After the intro animation (FYI I hate these but clients love them) you should see:
Scrolling from first red section into blue I see a flash
Scrolling from first red section into blue, often times it will almost get to blue, but then glitch back to red.
You can actually scroll UP past the top of the page
Works great on Firefox and even Safari (OMG).
All the issues seem to be related to going from first slide to the second.
I have noticed that the length of the scroll-handle seems to change when going from section 1 to 2, I have no idea why but perhaps that is related?
Any tips or help would be most welcomed!
OK looking into this now, I see that it was because I had an element (footer) at the bottom of the page that was toggling to display:none. Not sure why this should effect scroll snap, but I suppose it's because it is changing the length of the scrollbar and Chrome didn't like that.
This doesn't stop the scroll up issue (#3), but it does seems to solve all the visual glitches.
So for all future people: When using scroll-snap, make sure you aren't doing anything that might change the height of the page during scroll, Chrome doesn't like that. 100vh on mobile was another culprit of this.
So Bgiframe is a huge lifesaver - we have used it to tackle the IE PDF issue where is would hide our css dropdown menus. However, we have run into an issue - our css menus have a max height, and once that height is filled, they begin to use a scrollbar within the menu (think the Facebook notifications). bgiframe does an excellent job making sure that the menus themselves appear in front of the PDFs in IE, but the scrollbars in the menus do not - they and they alone are still hidden. We have inspected the elements to make sure that the menus and the bgiframe are the same, correct width, and they are - but the scrollbar is still hidden. This might be a bgiframe issue or an IE rendering issue, not sure. Nowhere - and I mean nowhere - have we been able to find anyone else with this kind of problem. Anyone have any ideas?
Use jscrollpane instead of the browser default scrollbar. Also, make sure bgiframe covers the scrollbar area explicitly.
I redesigned a website for a friend using twitter bootstrap which i supposed would save me from thinking about cross-browser compatibility.
Now I try to use it with firefox only to notice that the controls of the Carousel component move away when you hover them, thus making it impossible to click them. Not to mention it looks rather unprofessional.
The strange behavior can be seen here and occurs to me on Firefox 18.0.2:
http://snow-first.com/snow-rabbit-3/
Anybody has a clue to what's going on? Tried looking in the css but the only thing that should happen on hover is an opacity change...
for the selectors .carousel-control:hover, .carousel-control:focus (line 576 of your CSS) add position:absolute
I have a mobile chatroom i'm using. Whenever I load it up in safari on an iphone. Clicking in the text area brings up the keyboard, which I want but the keyboard completely ruins the layout of the webpage. How do I fix this? Heres a link to the http://www.306radio.ca/mobile/chat/
From a quick look, it looks like the issue you are having is coming from the div#userContent having a style of float: left, and the div above it having position:absolute. Those two seem to be causing the reflow you're experiencing.
I removed the float and removed the positioning, and that solved the reflow, but it looks like there could still be issues with JavaScript resizing the widths of things on the page.
Unfortunately, I don't have time to look into it, but this should fix the issue your question asked.
Keep digging in to CSS, and especially responsive design, and you might be able to solve this solution with less CSS and JS code.
I have a css display issue with jquery ui tabs, where after you go over a certain number of tabs, the last tab drops down to the next line, as if the tab before it was set to clear:right.
i cant figure out what css is causing this.
the issue can be seen here
edit: i should mention that i see this issue in FF and Chrome. havent tried in IE yet
also here is a screenshot of what i see:
edit 2: this seems to depend on resolution. it happens to me in 1280x1024 and smaller
I actually understood your question after playing around with resizing the browser as it doesn't happen on widescreen monitors otherwise.
The issue you're having is due to .header-contact jutting down into the tab area because of the padding. You either have to remove the padding or decrease the height of this class and everything should be ok.