'How do you move a tab as far left into view on focus with horizontal scrolling?

I am using Chakra-UI with and Reactjs and have the Tabs component set to scroll horizontally when they don't fit in the viewport. I am wondering how to get the tab to snap as far left as it can when in focus state to avoid the tab being partially visible as in the example below.

Hidden focused tab: enter image description here

Default tab position: enter image description here

I am trying x mandatory in the sx prop but this doesn't have an effect on Chakra Tabs, which I am sure I am implementing wrong.

<TabList
  overflow="scroll"
  sx={{
     "white-space": "nowrap",
     width: "100vw",
     position: "relative",
     "scroll-snap-type": "x mandatory",
     left: "50%",
     right: "50%",
     "margin-left": "-50vw",
     "margin-right": "-50vw",
     "-webkit-overflow-scrolling": "touch",
     "-webkit-padding-start": "1rem",
     "::-webkit-scrollbar": {
        display: "none",
     },
  }}
>

What I'd like to happen is the selected tab move to the same position as the first default tab, or just bring it into the viewport at the right when it is the last tab. How can I do this?

javascriptcssreactjschakra-ui


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions