Filter pane doesn't scroll all the way until end of page

[Arthur]

Hello!
I recently observed an UI issue that is a bit hard to explain, but I’ll give it my best: after choosing a category on the all listings page, I have some filters that appear in the filter pane (quite a few, not all visibile from the start). If I start scrolling on the listings, then the Filter Pane also gets scrolled up proportionally up until the very last filter, but it stop BEFORE the “Filter” action button becomes available. In order to see this button, I have to scroll all the way to the bottom of the listings page, and only then the Filter Pane scroll a little bit more, so that it also makes the button visible.
I would like for it to scroll all the way to the Filter button for the beginning OR , alternatively, to have the filter pane “longer” so it always displays the Filter button even without scrolling.

Any ideas how do to this? I tried with some CSS but I only came up with a workaround that allows me to scroll separately in the Filter Pane, which is nice but the issue with it is that now the filter pane gets left behind and disappears after I scroll on the listings (it’s not sticky anymore):

.hp-page__sidebar {
    position: relative !important;  
    max-height: 80vh !important;  
    overflow-y: auto !important;  /* Enables vertical scrolling */
    overflow-x: hidden !important; /* Removes horizontal scrollbar */
    padding-right: 5px;  /* Prevents scrollbar overlap */
}

/* Fix for the inner sticky wrapper */
.inner-wrapper-sticky {
    position: relative !important;  
    transform: none !important;  
    overflow: hidden !important; /* Prevents any extra scrollbars */
}

/* Ensure the filter widget itself can scroll properly */
.hp-widget--listing-filter {
    overflow-y: auto !important;
    max-height: 80vh !important;
    overflow-x: hidden !important; /* Ensures no horizontal scrolling */
    padding-right: 5px; /* Avoids scrollbar cutting into content */
}
.hp-page__sidebar::-webkit-scrollbar, 
.hp-widget--listing-filter::-webkit-scrollbar {
    display: none; /* Hides the scrollbar for Webkit browsers (Chrome, Safari, Edge) */
}

.hp-page__sidebar, 
.hp-widget--listing-filter {
    scrollbar-width: none; /* Hides scrollbar in Firefox */
    -ms-overflow-style: none; /* Hides scrollbar in IE/Edge */
}

Thanks!

[condorito.fr]

If you put everything as !important then nothing is important.

I reckon chatGPT is important to you.

[Arthur]

Yeah, you have a point.
And yes - it is. Quite scary what it can do, but it has its limitations

[andrii]

Hi,

Thanks for the feedback, we will try to improve the UI\UX in the next updates. As a temporary fix, please use this CSS snippet: Disable the sticky sidebar on all HivePress pages #hivepress #templates · GitHub