OP 18 January, 2023 - 11:22 AM
(This post was last modified: 18 January, 2023 - 01:10 PM by S4L. Edited 2 times in total.)
I've always had a hard time following what was going on in the shoutbox, and I discovered why today : the messages order
New messages display at the top, then it stacks, while the message input area is at the bottom.
I'm sure it's a choice, but the UX is horrible...
My suggestion : Add a settings to reverse messages order
This CSS works perfect :
Preview :
It's possible to add this CSS ourselves, but it would be simplier and more welcoming to new members who may not know about the custom CSS thing
EDIT :
https://cracked.io/Thread-Scroll-issue-on-Home-page
It fixes the scroll issue partially. There will still be a scroll issue, but it will scroll up (instead of down) until you have scrolled past the shoutbox. So all the homepage features can be used without random scrolls !
EDIT 2 :
My code introduce a bug : the shoutbox can't be scrolled (as it changed from display:table to flex)
The following code will add a working scrollbar, but it will not fix the scroll issue on home page (previous EDIT)
New messages display at the top, then it stacks, while the message input area is at the bottom.
I'm sure it's a choice, but the UX is horrible...
My suggestion : Add a settings to reverse messages order
This CSS works perfect :
Code:
#shoutbox #container-main {
display: flex;
flex-direction: column-reverse;
}
Preview :
It's possible to add this CSS ourselves, but it would be simplier and more welcoming to new members who may not know about the custom CSS thing
EDIT :
https://cracked.io/Thread-Scroll-issue-on-Home-page
It fixes the scroll issue partially. There will still be a scroll issue, but it will scroll up (instead of down) until you have scrolled past the shoutbox. So all the homepage features can be used without random scrolls !
EDIT 2 :
My code introduce a bug : the shoutbox can't be scrolled (as it changed from display:table to flex)
The following code will add a working scrollbar, but it will not fix the scroll issue on home page (previous EDIT)
Code:
#shoutbox .window {
overflow: hidden;
}
#shoutbox #container-main {
display: flex;
flex-direction: column-reverse;
overflow: auto;
}