• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

186
Views
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?

about 3 years ago · Santiago Gelvez
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error