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

Single-line form with labels positioned above the input fields

For my web app project, I am using AngularJS and Bootstrap 3 for CSS (although my CSS knowledge is limited). I am trying to design an inline form with 5 input fields and labels positioned on top of them. The first field should take up more space than the o ...

htmlcssangularjsformstwitter-bootstrap-3

Does anyone have tips on how to upload images to MongoDB using React?

Currently, I am working on a project that requires an image upload feature for users. These images need to be stored in MongoDB so that they can be viewed by the user later on. Can anyone offer assistance with this? I have successfully configured my datab ...

javascriptreactjsmongodb

The onClick event's detail property is persisting even after the React component has been replaced

In the onClick event, the value of event.detail indicates the number of clicks, with a double-click having event.detail = 2. It seems that when the React component being clicked is replaced, the event.detail value does not reset. This could be due to Reac ...

javascriptreactjsdomonclickdom-events

The importance of formatting in coding and how to effectively apply it

Why is proper code formatting so important for programmers? What are the benefits of following consistent formatting rules, and what exactly are these rules? Many programmers prefer to write their code like this: <html> <head> < ...

phphtmlcssformatting

What is the purpose of requiring the explicit invocation of app.listen(port) to enable express-ws to function properly?

I've recently started exploring NodeJS Express and came across the official tutorial from express-ws for setting up websockets in a simple project generated using npx express-generator. While following the tutorial, I noticed that in the app.js file, ...

javascriptnode.jsexpress

Resolving the Material-UI NextJS Button Styling Dilemma

I've encountered an issue with the styling of a few buttons in JS. When I apply a styling class using className, the formatting works fine on the initial render but loses its styling on subsequent refreshes. This problem is specific to two individual ...

htmlcssreactjsmaterial-uinext.js

excess white space appears in the mobile version

I recently completed a website using both materializecss and bootstrap platforms. While I know this may not be the best practice, it worked for my needs. However, I am facing an issue with the mobile view. When I reduce the viewport size, a margin appear ...

javascripthtmlcsstwitter-bootstrapmaterialize

Creating a dropdown button in HTML table cells with JavaScript: A comprehensive guide

I'm attempting to create a drop-down button for two specific columns in my HTML table, but all the rows are being converted into drop-down buttons. I only want the "categorycode" and "categoryname" columns to be drop-down. $(document).ready(functio ...

javascriptjqueryhtml

Mastering CSS: Optimizing Div Placement Across Sections

I am currently working on developing a sleek and modern landing page with multiple sections, each designed to catch the eye. This style is all the rage at the moment, featuring large headers, ample padding, bold text, and a visually appealing divider betwe ...

htmlcssreactjsnext.jstailwind-css

A dynamic image carousel featuring multiple images can be enhanced with fluid movement upon a flick of

I am trying to enhance this image slider in HTML and CSS to achieve the following objectives: 1. Eliminate the scroll bar 2. Implement swipe functionality with mouse flick (should work on mobile devices as well) 3. Make the images clickable .slider{ ove ...

javascripthtmlcss

Can you explain the concept of cross domain and how JSONP fits into the picture?

As a beginner in .net programming, I have created a webservice where JavaScript calls the webservice in my code. I attempted to call it using my phone's browser while on the same network. It works perfectly with localhost, but when trying to call the ...

javascriptjsonweb-servicesjsonp

Show and Arrange Various Key-Object Data pairs

I'm facing a challenge with mapping and displaying a JSON file in a different structure. I need help figuring out how to map the data properly. Here's the JSON file: var data = { "megamenu": [ { "name": "level1.2", "link": "#", ...

javascriptarraysjsonreactjsecmascript-6

Issues arise with the functionalities of FireFox related to transformations and transitions

I've been working on my CSS and here is what I have: img.buttonImg { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: ...

cssfirefox

Access the values within an array located inside a data object by utilizing ng Repeat function

Attempting to utilize ng repeat for extracting values from an array. Below is the HTML code: <ion-list ng-repeat="item in locationresult"> <ion-item > <ion-checkbox ng-repeat="innerItem in item.loc[$index]"> ...

javascriptangularjsionic-frameworkhybrid-mobile-app

Mastering the art of gracefully transitioning to a fallback option when CSS grid

When it comes to creating a simple grid of squares (3x3 at most, filling in top to bottom left to right), I have encountered challenges with both flexbox and grid. The DOM structure required for each method seems incompatible or too complex to support both ...

htmlcssflexboxcss-grid

"Utilizing GroupBy and Sum functions for data aggregation in Prisma

I am currently working with a Prisma schema designed for a MongoDB database model orders { id String @id @default(auto()) @map("_id") @db.ObjectId totalAmount Int createdAt DateTime @db.Date } My ...

javascriptmongodbnext.jsprisma

If the height of the window changes, then update the CSS height accordingly

Here is the code that I am using: $(document).ready(function() { $('body').css('overflow', 'scroll'); var heightWithScrollBars = $(window).height(); $('body').css('overflow', 'auto') ...

jquerycss

Employing various Class Methods based on the chosen target compiler option

Is there a way to instruct TypeScript to utilize different implementations of methods within the same class, based on the specified target option in the tsconfig.json file? I am currently transitioning one of my scripts to TypeScript to streamline managem ...

javascripttypescriptclass

Differences between JSX and creating instances of component classes

Could someone please clarify the distinction between the following two statements? let instance1 = new CustomComponent(); and let instance2 = <CustomComponent /> When checking in the Chrome debugger, I see the following: for instance1 CustomComp ...

javascriptreactjs

Transmitting state to infinitely nested component in React/Redux

I'm currently facing an issue with a component that has children of the same type as itself in React with Redux. Although I can render the children, they are unable to access their own slice of state. export class Material extends React.Component { ...

reactjsreduxmaterial-uireact-redux