• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Help Hidden Scroll on Mobile Clips Text on Right

kaninchen

𝓫𝓲𝓻𝓭𝓲𝓮
Hey, me again (I know, goodness gracious trust me) but I need some guidance on an issue I'm facing.

When looking into this issue on the CSS side to translate over to BBcode, I only find solutions for the text at the very bottom being cut and not on the right. My issue is this: everything looks fine (if a little janky) on a computer, but when on mobile the text ends up clipped on the right side, sometimes totally unreadable. This happens on 100% width as well, as I see a lot of people doing scrolls like I've done below. I've used a lot of different widths and it just makes it look really bad on PC and just legible enough on mobile. Padding out the right helps, but then on PC it makes the text uncentered.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa massa ultricies mi quis hendrerit dolor magna. Gravida neque convallis a cras semper auctor neque vitae tempus. Enim blandit volutpat maecenas volutpat blandit aliquam etiam. Ac tincidunt vitae semper quis lectus nulla. Et leo duis ut diam. Nulla facilisi etiam dignissim diam. Metus aliquam eleifend mi in nulla posuere sollicitudin. Iaculis at erat pellentesque adipiscing. Risus ultricies tristique nulla aliquet enim tortor at auctor urna.

Pellentesque elit eget gravida cum sociis natoque penatibus. A arcu cursus vitae congue mauris. Ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Egestas maecenas pharetra convallis posuere morbi leo urna. Tempus iaculis urna id volutpat lacus. Id donec ultrices tincidunt arcu non sodales neque sodales. Non enim praesent elementum facilisis leo. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Pretium quam vulputate dignissim suspendisse in est ante in nibh. Feugiat sed lectus vestibulum mattis ullamcorper. Amet facilisis magna etiam tempor orci eu lobortis. Amet mauris commodo quis imperdiet massa. Consectetur adipiscing elit pellentesque habitant morbi tristique. Imperdiet massa tincidunt nunc pulvinar. Eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Lorem donec massa sapien faucibus..


So, what can I do to make a foolproof, mobile friendly hidden scroll? I don't know what I'm missing here. I also wonder if the flex has anything to do with it (though I messed with that too and not much happened) but I'm not sure. Code is below.

[border=0px; padding-top:10px; border-radius:20px; margin:auto; margin-bottom:10px; display:flex; flex-flow:column nowrap; background:aliceblue; -webkit-box-shadow: 10px 14px 0px -2px #BDBDBD; box-shadow: 10px 14px 0px -2px #BDBDBD; max-width:20%; min-width:200px; height:200px;][comment] *text goes below here [/comment][border=0px; margin:auto; height:fit-content; width:95%; box-sizing:border-box; flex:1;color:black; line-height:15px; overflow:hidden;][border=0; padding:0; width:120%; height:98%;overflow-y:scroll; overflow-x:hidden; padding-right:35px;][justify][font=Rubik]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa massa ultricies mi quis hendrerit dolor magna. Gravida neque convallis a cras semper auctor neque vitae tempus. Enim blandit volutpat maecenas volutpat blandit aliquam etiam. Ac tincidunt vitae semper quis lectus nulla. Et leo duis ut diam. Nulla facilisi etiam dignissim diam. Metus aliquam eleifend mi in nulla posuere sollicitudin. Iaculis at erat pellentesque adipiscing. Risus ultricies tristique nulla aliquet enim tortor at auctor urna. Pellentesque elit eget gravida cum sociis natoque penatibus. A arcu cursus vitae congue mauris. Ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Egestas maecenas pharetra convallis posuere morbi leo urna. Tempus iaculis urna id volutpat lacus. Id donec ultrices tincidunt arcu non sodales neque sodales. Non enim praesent elementum facilisis leo. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Pretium quam vulputate dignissim suspendisse in est ante in nibh. Feugiat sed lectus vestibulum mattis ullamcorper. Amet facilisis magna etiam tempor orci eu lobortis. Amet mauris commodo quis imperdiet massa. Consectetur adipiscing elit pellentesque habitant morbi tristique. Imperdiet massa tincidunt nunc pulvinar. Eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Lorem donec massa sapien faucibus..[/font][/justify] [/border][/border][/border]
 
i don't know how to explain technicality-wise why it does it, but unfortunately the way to do hidden scrolls that is readable on windows vs mac os/mobile will inevitably result in odd spacing on one! i don't think we've yet found a way to avoid it that works consistently ( ´ ▿ ` ) the only way i can explain this is that mac os/mobile's scroll bars are much skinnier than they are on windows, so using any fixed px or % might produce a clean cut on windows but cut off too much otherwise.

you can go ahead and use this snippet as reference for a scrolling code that will work on mobile as well as pc:
[border=0; /*only put vertical padding*/ padding:0; box-sizing:border-box; height:250px; width:400px; overflow:hidden; display:flex; flex-direction:column;][border=0; padding:0; width:200%; height:100%; overflow-y:scroll;][border=0; /*only put horizontal padding*/ padding:0; box-sizing:border-box; height:auto; width:50%; padding:0;][/border][/border][/border]

however, if you're using a windows computer, you'll notice there's an odd spacing on the right side of it. the easiest way to mitigate this issue is with padding, i.e. if your container box already has padding, shift the padding to the scrolls and reduce padding on the right side. this will, of course, result in the scroll being off-centre on mac os/mobile, so you can choose whether you care about the devices that aren't your own ( ◡‿◡ *)

i've put this into the code you added to illustrate what i mean by doing this, alongside to hopefully explain the comments in the code snippet about horizontal/vertical padding! just note the values for the short-hand for putting padding into one property go in the order of top/right/bottom/left!!

[border=0px; padding0; border-radius:20px; margin:auto; margin-bottom:10px; display:flex; flex-flow:column nowrap; background:aliceblue; -webkit-box-shadow: 10px 14px 0px -2px #BDBDBD; box-shadow: 10px 14px 0px -2px #BDBDBD; max-width:20%; min-width:200px; height:200px;][comment] *text goes below here [/comment][border=0px; margin:auto; height:fit-content; width:95%; padding:10px 0; box-sizing:border-box; flex:1; display:flex; flex-direction:column; color:black; line-height:15px; overflow:hidden;][border=0; padding:0; width:200%; height:98%;overflow-y:scroll; overflow-x:hidden;][border=0px; height:auto; width:50%; /*right padding is less, so the spacing is removed*/ padding:0 0 0 10px; box-sizing:border-box;][justify][font=Rubik]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa massa ultricies mi quis hendrerit dolor magna. Gravida neque convallis a cras semper auctor neque vitae tempus. Enim blandit volutpat maecenas volutpat blandit aliquam etiam. Ac tincidunt vitae semper quis lectus nulla. Et leo duis ut diam. Nulla facilisi etiam dignissim diam. Metus aliquam eleifend mi in nulla posuere sollicitudin. Iaculis at erat pellentesque adipiscing. Risus ultricies tristique nulla aliquet enim tortor at auctor urna. Pellentesque elit eget gravida cum sociis natoque penatibus. A arcu cursus vitae congue mauris. Ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Egestas maecenas pharetra convallis posuere morbi leo urna. Tempus iaculis urna id volutpat lacus. Id donec ultrices tincidunt arcu non sodales neque sodales. Non enim praesent elementum facilisis leo. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Pretium quam vulputate dignissim suspendisse in est ante in nibh. Feugiat sed lectus vestibulum mattis ullamcorper. Amet facilisis magna etiam tempor orci eu lobortis. Amet mauris commodo quis imperdiet massa. Consectetur adipiscing elit pellentesque habitant morbi tristique. Imperdiet massa tincidunt nunc pulvinar. Eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Lorem donec massa sapien faucibus..[/font][/justify] [/border][/border][/border][/border]

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa massa ultricies mi quis hendrerit dolor magna. Gravida neque convallis a cras semper auctor neque vitae tempus. Enim blandit volutpat maecenas volutpat blandit aliquam etiam. Ac tincidunt vitae semper quis lectus nulla. Et leo duis ut diam. Nulla facilisi etiam dignissim diam. Metus aliquam eleifend mi in nulla posuere sollicitudin. Iaculis at erat pellentesque adipiscing. Risus ultricies tristique nulla aliquet enim tortor at auctor urna.

Pellentesque elit eget gravida cum sociis natoque penatibus. A arcu cursus vitae congue mauris. Ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Egestas maecenas pharetra convallis posuere morbi leo urna. Tempus iaculis urna id volutpat lacus. Id donec ultrices tincidunt arcu non sodales neque sodales. Non enim praesent elementum facilisis leo. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Pretium quam vulputate dignissim suspendisse in est ante in nibh. Feugiat sed lectus vestibulum mattis ullamcorper. Amet facilisis magna etiam tempor orci eu lobortis. Amet mauris commodo quis imperdiet massa. Consectetur adipiscing elit pellentesque habitant morbi tristique. Imperdiet massa tincidunt nunc pulvinar. Eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Lorem donec massa sapien faucibus..


this is just one way, but the basic concept of making use of the spacing here should help you! you can take a look at nano's code as well, since i remember they make use of a different method to achieve a similar result (o˘◡˘o) and of course, there's no need to really do the work-around at all if you care only about whether its readable across devices.
 
ahh, that's unfortunate it's a built-in (?) problem! sometimes i wonder why it can't just work because i say so, lol. but thank you so so so much for giving me some options/solutions, your help is really invaluable to me! :*)
 

Users who are viewing this thread

Back
Top