AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |
Back to Blog
Overflow css scroll bar instead of wrap1/15/2024 Drag the bookmarklets to your bookmark bar to use them! The bookmarklet comes in two versions: One shows scroll bars for all elements with overflow: scroll, and the other one only shows scroll bars when they’re not needed: elements that don’t scroll but still have overflow: scroll applied to them. Show all overflow: scroll scroll bars Show unneeded scroll bars It renders scroll bars on your page just like your Mac would if it’s set to always show scroll bars. What if it was easier to detect visible scroll bars without having them enabled across your operating system? I wrote a little bookmarklet that does just that. There’s a reason Mac hides them! Emulating scroll bars …but then you’re left with ugly scroll bars just like the rest of us, which you probably don’t want. Go to System Preferences, then General and toggle “Show scroll bars” to “Always”. Windows and Linux always show you the scroll bars, but if you’re on Mac you have to change a setting to get them to show. Yep, if you have multiple elements with overflow:scroll, the scroll bars will just stack. If add an image to a LinkedIn post, you’re shown not one but two inactive scroll bars next to each other. Spotting the issueĭisabled scroll bars are easy to spot on Windows and Linux, because you’ll have rather ugly inactive scroll bars visible on the page, for example here in the LinkedIn post creator:Ī single scroll bar is not the worst that can happen. overflow: auto: Show a scroll bar when needed. So in short: overflow: scroll: Always show a scroll bar. For that, you need overflow: auto, which lets a browser automatically determine if a scroll bar is needed - or not. In most situations however you probably only want to show a scroll bar if one is needed, and hide it when not (you know, like Mac). It may seem natural to add overflow: scroll to anything you want to be scrollable, but what it actually says is always show a scroll bar. But the actual culprit is developers using overflow: scroll when they mean overflow: auto. Often, MacOS hiding scroll bars by default is blamed for this (I know I’ve done that in the past). Either because someone points it out to them or because they attach a mouse to their mac which makes scroll bars appear. To solve the long unbreaking text issue, simply add word-wrap:break-word to the container and it will force the text to wrap onto a new line.Every now and then a web developer using a Mac discovers that their beautiful design is littered with scroll bars on other platforms. Using overflow:hidden will hide any content that exceeds the boundry of the container. Again, there is a drawback to this method as well. To avoid a scrollbar from showing you should use overflow:hidden.long url text) or a large image that is bigger then the container a scrollbar will show. For example, if you have a long unbreaking text (ie. Using overflow:auto will cause a scrollbar if your content is extending the boundary of the container.The container automatically aligns after the floated avatar image.Īlthough it is a nice trick to clear floats there are some drawbacks: The advantage of using overflow here is that I don’t have to set a float or width to the comment container. To prevent the comment from wrapping around the avatar just add overflow:hidden to the comment container. You would, most likely, have an avatar floating on the left and the comment to the right. Let’s say you are designing a comment list. Overflow:auto can also be used to prevent content from wrapping around the floated element. This is perhaps the simplest way to clear floats. To fix this problem, you can simply add the CSS property overflow:auto (or overflow:hidden) to the wrapper container. The demo below shows the issue with floating child elements where the parent container doesn’t expand. Today I would like to revisit the topic along with a few tips. It’s been documented before long long ago. But did you know you can also use the overflow property to fix this problem? It’s not a new CSS trick either. The typical solution to fix this is by adding an element with clear float after the floating elements or adding a clearfix to the wrapper. One of the common problems we face when coding with float based layouts is that the wrapper container doesn’t expand to the height of the child floating elements.
0 Comments
Read More
Leave a Reply. |