Horizontal Scroll Box Help

aliasRinse, Oakey, rickrollme
pronounsShe/Her
76written posts
pancakehouseearned bits
offlinecurrently
pancakehouse
Junior Member
pancakehouse Avatar
SIGMAR BLESS THIS RAVAGED BODY!
Hello! Asking for help on here has proved incredibly fruitful for me in the past, so here I am again! 



I'm trying to code a small award section in my mini-profile on a Proboards site, pictured above. The box for the awards is only 246px by 40px. And the trick I'm trying to hammer into existence is a horizontal scroll, where you can scroll horizontally to see the rest of the awards if there are more. But... I've never made a horizontal scrollbox before, and no matter what I try to incorporate into my Style Sheet/webkit scroll thingy, I can't get it to work. I honestly don't know what I'm doing lol. I've added a 'float:left;' to each image. It's probably something simple I'm missing. Could anyone give me a nudge in the right direction? How does one code a horizontal scrollbox in their Style sheet? I can make vertical ones just fine, but this horizontal thing is throwing me for an absolute loop. I've tried adding -x's and :horizontal's everywhere.


last edit on Sept 15, 2021 2:32:06 GMT by pancakehouse

an original powers rp
932written posts
gimmickearned bits
offlinecurrently
gimmick
Part of the Furniture
gimmick Avatar
All birds and men are sure to die but songs may live forever
Not knowing what code you currently have in place, I would try:

1) Remove the float from the images, and make them display: inline-block so they'll sit all in a row. Float is best used for if you're trying to wrap text around something.

2) For your 246px x 40px box, add white-space: nowrap, which will—as you might guess—prevent the content in the div from wrapping into new lines. Also, this is the only div that should need overflow-x: auto, so if you have it elsewhere you can probably remove it.

3) I'd also remove any :horizontal's, since that isn't a real selector
last edit on Sept 15, 2021 4:20:47 GMT by gimmick
aliasRinse, Oakey, rickrollme
pronounsShe/Her
76written posts
pancakehouseearned bits
offlinecurrently
pancakehouse
Junior Member
pancakehouse Avatar
SIGMAR BLESS THIS RAVAGED BODY!
Thank you so much for your help, , you're always so great! I really appreciate it!

I've added your suggestions, but I must be missing something. There is still no scrollbar/scrolling, and now it's as if my images have a left offset of some sort. I've included below what this portion of my Style Sheet looks with the current coding. Can you see anything I'm blatantly overlooking? Thanks so much for your help!


an original powers rp
932written posts
gimmickearned bits
offlinecurrently
gimmick
Part of the Furniture
gimmick Avatar
All birds and men are sure to die but songs may live forever
Thanks for the link! I found the issue. Your .award-slideshoww class has a width of 295px right now, but the width of the div it's in (.tab) has a content width of 146px and overflow: hidden. The result is that all the images can fit on one line inside .award-slideshoww without having to scroll, but .award-slideshoww is getting cut off.

If you either remove the width: 295px (will naturally fill 100% of the available space) or set it to 146px, you'll see the scroll.

As an aside, you should use height instead of width when setting the size of .award-slideshoww::-webkit-scrollbar because it's horizontal.
last edit on Sept 17, 2021 15:29:29 GMT by gimmick
aliasRinse, Oakey, rickrollme
pronounsShe/Her
76written posts
pancakehouseearned bits
offlinecurrently
pancakehouse
Junior Member
pancakehouse Avatar
SIGMAR BLESS THIS RAVAGED BODY!
Loooool, I am rolling my eyes as far back as they go and facepalming into the void. I just knew it was going to be some simple oversight like this. All of my endless head-scratching and I'd missed changing a 2 to a 1. And then proceeded to NEVER notice, despite laboriously poring over this Style Sheet.

It's fixed and working now.

Again and again, THANK YOU so much for your eyes on this. You're the bombest. Yeah, I'd tried interchanging 'width' and 'height' a couple times, and when nothing worked (because obviously), I tried looking at the make-up of a plotting template that used horizontal scrolls. They had used width as far as I could tell, so I was like... hmm, okay? Lol.

an original powers rp
internally screaming
pronounsshe/her
1,786written posts
Nekoearned bits
onlinecurrently
Neko
Administrator
Neko Avatar
stressed, depressed, and probably not well-dressed
[nospaces]

[attr="class","infoBG"]
[attr="class","infoBG2"]
[attr="class","infoBack"]
[attr="class","infoTitle"][attr="class","fa fa-star-o"] threadarchived
[attr="class","infoDiv"]

[attr="class","infoBody"]

This thread hasn't had any replies since a month ago - feel free to repost if you wish!