NO BUG: Sticky tab menu in nestable tabs

Bugs
1

Hi !
I’m in trouble with nestable tabs ! I added it and I set tab menu and tab content in horizontal direction. Then, because my tab content is long, I wanted to make the tab menu always visible with sticky position and that doesn’t work.

Ps : If I set the direction to vertical, stick position works fine.

Capture d’écran 2024-08-28 à 06.46.09
Capture d’écran 2024-08-28 à 06.46.091530×1824 247 KB

2

Hi @ClemJam,

I’ll mark this topic as a no-bug, because this is just how CSS works.

When you align Tabs (Nestable) horizontally, and I suppose in Tab Menu, you set it to Vertical and position sticky, you will also need to set align-self to flex-start (Start), then it should work.

image
image936×1414 51.6 KB

Explanation: Since adding flex to the wrapper, the child elements default to stretch, which means that all elements are the same height, and you can’t scroll elements if they are the same height.
By settings “flex-start” property, will set the height to “auto”, and scrolling will be allowed.

That’s it. Hopefully, it makes sense :slight_smile:

Best regards,
M

3

As usual, your advices are really helpful and solve issues ! Thanks ! :pray:

It brings an other question : Is there an easy solution to scroll to the top of the content tab when clicking on the title tab ? It could be useful if the content is long.

If not, may I make a feature suggestion ?

Sincerly,
Clem

4

Hey. thank you :slight_smile:

There is no easy way to do this, but you can use the JS below to do that, you just need to run it after DOM is parsed.
The function below finds all .tab-titleand then add a click listener on it, so that it scrolls to top (smoothly).

Maybe you will need to adapt it a little, this is just a quick demo :slight_smile:

document.querySelectorAll('.tab-title')
  .forEach(tab => tab.addEventListener('click', () => {
      window.scrollTo({ top: 0, behavior: 'smooth' });
   }) 
)
5

Thanks ! It works with the following code :

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.tab-title').forEach(tab => {
    tab.addEventListener('click', (event) => {
      const tabContainer = tab.closest('.brxe-tabs-nested');
      if (tabContainer) {
        const tabContent = tabContainer.querySelector('.tab-content');
        if (tabContent) {
          window.scrollTo({
            top: tabContent.offsetTop,
            behavior: 'smooth'
          });
        }
      }
    });
  });
});

Probably not the most beautiful code in the world but it works… Maybe it could help somebody !

Anyway, I’ll make a feature suggestion because I think it is a good thing to add to Bricks !

Have a good day,
Clem

1 Like