Fixed position scrollable tabs with Material UI

I recently implemented material-ui scrollable tabs in my project, referencing the documentation at https://mui.com/material-ui/react-tabs/#scrollable-tabs. Here is a snippet of the code I used:

 <Tabs
        value={value}
        onChange={handleChange}
        variant="scrollable"
        scrollButtons="auto"
        aria-label="scrollable auto tabs example"
        style={{ position: 'fixed', backgroundColor: 'white' }}  // Added this line!
      >
        <Tab label="All" component={Link} to="/main"></Tab>
        <Tab label="Chicken" component={Link} to="/main/chicken"></Tab>
        <Tab label="Pizza/Italian" component={Link} to="/main/pizza"></Tab>
        <Tab label="Chinese" component={Link} to="/main/chinese" />
        <Tab label="Korean" component={Link} to="/main/korean" />
        <Tab label="Japanese/Tonkatsu" component={Link} to="/main/japanese" />
        <Tab label="Pig's Feet/Bossam" component={Link} to="/main/pork" />
      </Tabs>

After implementing these changes, I noticed that the header and scrollable tabs didn't stick when scrolling through the posts, which was necessary for the design. To address this, I added the following code to fix the position of the header and scrollable tab:
style={{position: 'fixed'}}
This adjustment successfully fixed the header and scrollable tabs in place. However, the scrolling functionality within the tabs stopped working as expected.
I'm seeking assistance on how to properly handle this issue. Any help would be greatly appreciated.

https://i.stack.imgur.com/lotCu.png

javascriptcssreactjsmaterial-ui

Answer №1

For optimal styling, be sure to include style={{position: 'fixed'}} in the parent element of the Tabs component:

<Box sx={{ maxWidth: 320, position: 'fixed', bgcolor: 'background.paper' }}>
   <Tabs
       value={value}
       onChange={handleChange}
       variant="scrollable"
       scrollButtons="auto"
       aria-label="scrollable auto tabs example"
   >
       <Tab label="All" component={Link} to="/main"></Tab> 
   </Tabs>
</Box>

Check out the live demo here:
https://codesandbox.io/s/labtabs-material-demo-forked-bx030i?file=/demo.tsx

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Concealing URL parameters in ui-sref (using ui.router)

Here is the HTML code I am working with: <a ui-sref="videoParent.Display.video({videoName:'[[sVid.slug]]', videoId:'[[sVid.videoID]]'})"><p>[[sVid.name]]</p></a> The parameters videoName and videoId are retriev ...

javascriptangularjsangular-ui-router

I am unable to determine the origin or background of my sidebar

I am having an issue with styling a sidebar using HTML and CSS. The problem I am facing is with setting the background-color property. Despite my efforts to customize the style, the background remains transparent and shows the color of the page beneath it. ...

cssbootstrap-4backgroundsidebar

Include the component with the function getStaticProps loaded

I am currently working on a project using NextJs and I have created a component to load dynamic data. The component works fine when accessed via localhost:3000/faq, but I encounter an error when trying to import the same component into index.js. It seems l ...

javascriptreactjsnext.js

Ways to ensure the bootstrap table header width aligns perfectly with the body width

I am having an issue with my bootstrap table where the header width is smaller than the body width because I set the table width to auto. How can I align the header and body widths? Here is a link to a plunker showcasing the problem. https://plnkr.co/edit ...

javascripthtmlcsstwitter-bootstrapangular-ui-bootstrap

When attempting to call Firebase Functions, ensure that Access-Control-Allow-Origin is set up correctly

Although it may seem straightforward, I am confused about how Firebase's functions are supposed to work. Is the main purpose of Firebase functions to enable me to execute functions on the server-side by making calls from client-side code? Whenever I t ...

javascriptangularfirebasexssgoogle-cloud-functions

Examining the output of a personalized hook function

Currently, I am in the process of creating a test suite for this specific custom hook. export const useInitialMount = () => { const isFirstRender = useRef(true); // Initially, the ref is set to true but immediately changes to false on the first ren ...

reactjsreact-hooksreact-testing-libraryreact-hooks-testing-library

Leverage JavaScript to add the rel=0 attribute to a specific URL

Currently, I am integrating videos into my WordPress website using a plugin and I'm looking for a way to ensure that all the YouTube URLs contain rel=0 to eliminate related videos at the end. Can anyone suggest the best approach to achieve this? Any ...

javascriptyoutube

What are some ways to maintain code efficiency when working with AJAX requests?

Looking at the code below, I am making two identical Ajax requests with only one line of difference. Is there a way to consolidate this into a function to maintain DRY (Don't Repeat Yourself) code? $('.searchable').multiSelect({ selecta ...

javascriptjqueryajaxdry

Error: The Gravatar service is unable to retrieve the property 'get' from an undefined source

I have a basic app with just one controller. I'm trying to debug the output of the Gravatar.get() function in the console. However, I encounter an error saying: "TypeError: Cannot read property 'get' of undefined". I'm confused because ...

javascriptangularjs

What is the best way to pass a conditional true or false value to React boolean props using TypeScript?

I am currently utilizing the Material UI library in combination with React and Typescript. Whenever I attempt to pass a conditional boolean as the "button" prop of the component, I encounter a typescript error stating: Type 'boolean' is not assi ...

reactjstypescriptmaterial-ui

how can I modify the css style of an html element only when a specific sibling is present?

After searching through the MDN CSS documentation, I was unable to find any Combinators that can target the specific element I want to style. /* second-span red when first-span is present */ [first-span] ~ [second-span] { color: red; } /* firs ...

htmlcss

Hide Material UI Drawer when clicking elsewhere

Attempting to implement the Drawer component in Material UI React. Want to ensure that the state within the Drawer component persists even when the Drawer is closed, so passing variant="persistent" in Drawer component. The issue arises with the ...

javascriptreactjsmaterial-ui

Finding the solution to the perplexing issue with Generic in TypeScript

I recently encountered a TypeScript function that utilizes Generics. function task<T>(builder: (props: { propsA: number }, option: T) => void) { return { run: (option: T) => {}, } } However, when I actually use this function, the Gener ...

reactjstypescriptgenericstypes

Using checkboxes in an Express application

Currently, I am working on the task of parsing checkbox values into an array using express/ejs. Users are required to fill out a form and select checkboxes as shown below: Answer: Checkbox: The goal is to create two arrays from the input data: answer = ...

javascriptexpressmongooseejs

Exploring the issue of nested subscriptions causing bugs in Angular

My current challenge involves nesting subscriptions within "subscribe" due to the dependency of some data on the response of the previous subscription. This data flows down the subscription chain until it is stored in an array. Starting with an array of I ...

javascriptangulartypescriptrxjsobservable

Which Material UI feature allows components to appear without refreshing the page when clicked?

I'm diving into material UI, and I'd love to create a design similar to this one. However, I'm struggling to identify the specific feature that enables this. My goal is to show the market summary for option 1 when clicked, without refreshin ...

reactjsmaterial-uimaterial-design

Pressing the enter key does not submit the Vue.js form

When attempting to submit the form by pressing "enter" on the keyboard, it only works when I click the "submit" button. I made sure to add @submit to the form event to ensure it triggers, but upon checking a log, I found that it only triggers when clicking ...

javascriptvue.jsvuetify.js

npm is encountering an issue and producing an error message stating 'module cannot be found' when starting the application

I've been attempting to launch my React app by running the npm run start command, but every time I try, it throws the following error: $ npm run start node:internal/modules/cjs/loader:933 const err = new Error(message); ^ Error: Canno ...

node.jsreactjsnpmmernnpm-start

Determining If Props Have Been Undefined In React

Greetings and thank you for taking the time to read this: I am currently working through a tutorial that can be found here: My issue lies in the creation of an author, where the application is trying to load the URL of the current author's ID, which ...

javascriptreactjs

What is the best way to implement this header style with code?

I came across this design from a potential client recently, even though we didn't end up working together. I thought it would be a good exercise to try coding the design for practice purposes. Just to clarify, this is not my original design and I have ...

htmlcss