? Squished Post Stream Scrubber?

16BitMiker

Hey there, this is my first post on this forum.

Before I ask my question I would like to say I just installed flarum for my community and I LOVE IT! Hands down the best thing I have ever seen! Kudos to all who had a hand in it's development!!

Now for my question, I seem to have already broke something >__< I added a custom header and it seems to have squished the floating side .PostStreamScrubber

Example @ https://geekalicious.org/d/7-introduction-thread

When I remove the custom html header everything goes back to normal.

Anyone know why this is?

Thanks in advance!

.PostStreamScrubber Error

Justoverclock

can u try adding this to your custom css?

 @media (min-width: 700px) {
            .DiscussionPage-nav, .DiscussionPage-nav>ul {
                position: sticky;
                top: 80px;
            }
            .App {overflow-x: visible;}
            }
           
           .Post::before, .Post::after {
               content:none
           ;}

16BitMiker

Justoverclock

Thank you for the quick reply! It is positioned correctly now but it's still squishy.

@ https://geekalicious.org/d/27-epic-npc-man-adventure

Getting closer 🙂 Anything further I can try?

luceos

If I remember correctly there's some javascript somewhere that positions the call to action button as far from the top as the header takes in size. This also pushes down the scrubber. I had some code somewhere for a client that changed this logic, but I'm not sure as this might also probably better be resolved through core .. 🤔 I personally hate that the button is place so far from the top when scrolling.

16BitMiker

luceos

I don't mind implementing custom javascript, do you have a snippet to share? 🙂

These kind of visual errors drive me bonkers.

luceos

16BitMiker it looks fine for me on firefox. What browser do you use?

16BitMiker

luceos

I am using brave, I tried it in firefox but I still get the squishy version.

Darkle

Yes, I also see it well, the only thing maybe would be the height of the scrollbar (?) you can modify its size, by default there is a maximum height of 231.219px, to overwrite this:

.scrubber-scrollbar {
    max-height: 380px!important;
}

Set the pixels you want

16BitMiker

Darkle

Hmmm it doesn't seem to be working for me.

I am using the chrome extension Stylebot to test.

Darkle

16BitMiker Oops I forgot, put also the height it would look like this

.Scrubber-scrollbar {
    height: 380px;
    max-height: 380px!important;
}

16BitMiker

Darkle

THAT WAS IT!!! THANK YOU SO MUCH!!

And thank you @Justoverclock for the first part.

and @luceos for your quick attention.

I don't usually post to support forums.

I wasn't sure if anyone would help, this is a amazing community!!

Justoverclock

i see all fine on my side