I'm using Angular Material tabs to display content on a page. However, I want the first tab to remain sticky and not scroll with the other tabs so that users can easily access it no matter how many other tabs there are. Currently, the first tab is part of the scroll and moves with the other tabs when the user scrolls. How can I make the first tab sticky and not part of the scroll?
So, for example, if I have 11 tabs and there is enough space on the screen to display only 5 of them, I want the first tab to always be visible, and the remaining 10 to be scrollable and visible that way. Currently, all 11 tabs are within the same scrollable area, so when I scroll to the right, the first tab disappears from view.
I'm using Angular Material tabs to display content on a page. However, I want the first tab to remain sticky and not scroll with the other tabs so that users can easily access it no matter how many other tabs there are. Currently, the first tab is part of the scroll and moves with the other tabs when the user scrolls. How can I make the first tab sticky and not part of the scroll?
So, for example, if I have 11 tabs and there is enough space on the screen to display only 5 of them, I want the first tab to always be visible, and the remaining 10 to be scrollable and visible that way. Currently, all 11 tabs are within the same scrollable area, so when I scroll to the right, the first tab disappears from view.
similar functionality in tables would be 'Table with sticky columns'
I already asked that on stackoverflow, but I still haven't received any answer as to whether it is possible and how I also provided example code and two images of how I would like it to look in the stackoverflow question.
can this be done somehow?