Collapsed filter-navigator showing scroll bars on load

VTEX in your native language 🌎 Portuguese
, ,
1

Good afternoon everyone, I’d like to see if anyone knows about this behavior in filter-navigator.v3
It’s currently configured like this:

"filter-navigator.v3": {
    "blocks": ["sidebar-close-button"],
    "props": {
      "initiallyCollapsed": true,
      "openFiltersMode": "one",
      "closeOnOutsideClick": true,
      "showClearAllFiltersOnDesktop": true,
      "blockClass": "search-result"
    }
  },

Currently in the store, the scroll bar for the filter options appears before the page fully loads, when ideally nothing should appear until the user clicks on the filter.

image
image1251×854 129 KB

I noticed while using the debugger that when the page loads, this div initially has a height of 400px and then goes to 0 when the page finishes loading.
image
image1514×847 327 KB

With the page fully loaded:

image
image1473×841 121 KB

I also tried overriding this with CSS in the highlighted blue section using the vtex.my-account.css file, but on the deploy workspace the CSS file only loads afterwards, causing the same problem.

That’s why I’m coming here to see if anyone has any idea what could be done — I’m completely out of ideas at this point.

Thanks in advance,
Cristiano.

2

Hi Cristiano, how’s it going?

Unfortunately I’ve never run into this bug myself, but I’ve dealt with this kind of horizontal filter with overlay before. What might help is using absolute on that class. Something like:

.vtex-search-result-3-x-filterTemplateOverflow{
position: absolute;
}

If it persists and you can’t resolve it right away, it might be worth trying a transition-delay on this bug.

Hope this helps, cheers.