Rounded borders + scroll bar
How do you guys deal with cards with rounded border-radius and scroll bar beside it? it doesn't look good imo (screenshot added in the comments)
12 Replies
I guess you can try adding padding so the scrollbar isn't obscured by the radius?
the scroll bar actually looks like it's on top of the card, basically breaking how the card looks like. I can't use overflow: hidden because i have other elements that i do want to overlap.
in mobile browser, it's not that bad, but still doesn't look great
have you tried doing the thing i suggested?
you mean add a padding to the card? mine already has one. This is how it looks like in Chrome desktop
I guess you need an inner container that has the scroll, padding-block on the outer?
Also this made me think of Jhey's curved scrollbar, which unfortunately is not a real grabbable scrollbar you can accessibly use I don't think π
https://codepen.io/jh3y/pen/zxOJdEe
I was thinking about that too π . I didn't take too close a look at it when JHey released it, I just assumed that it would be scrollable. I now see that it isn't so it is more of a scroll "indicator" than a scrollbar.
dang more codes π€£
if i could just make the scrollbar tucked in while everything else can overflow
btw, for context, here's how it is structured
<div class="stepList-wrapper"> to contain everything
<div class="stepList"> to contain all the instructions/steps (about a certain topic) only
<div class="stepInfo"> for the contents of the steps
the height of the stepList and stepInfo is calculated by a script that checks which stepInfo has the largest content then kt applies that height to all stepInfo to have a consistency with the looks (limiting the max-height to be just 90% of the viewport's height
hence the scroll bar for content that is bigger than the viewport's height.
If you guys have other suggestions on how to tell users that there's more below so i can just completely hide the scrollbar, that will be great
i don't know what I'm missing. If I understand this correctly, the padding in container is need to add a gap from the border, then the content has overflow-y: scroll
in my case, as per previous post, my height's declared based on content. My stepInfo (which is the content) already has an overflow-y: but set to auto. However, not sure why it is ommited in my screenshot
This inspired me to work on my own solution. Still things to finish off and tidy up but I will have it on Codepen soon
looks great. please share when you can, and I'll try it on mine
I was able to fix mine btw moving the border designs to the container then hiding the overflow (so that includes the scroll bar) but i losed the effect of the card's sliding when moving between steps (unless i make another div which will now be too many)
This is my demo on Codepen.
Chris Bolson
CodePen
Custom curved scrollbars
Replace the scrollbar and thumb with a custom scrollbar that curves with the border-radius at the top and bottom. ...