Ways to reposition Material UI tabs at the base of a container such as AppBar?

I'm looking for advice on how to position <Tabs within an AppBar at the bottom of a parent container, effectively placing them at the bottom of the header. Currently, I have divided the header into three sections: top-bar-left, top-bar-tabs, and top-bar-right. To achieve this layout, I have applied the following styles to the parent element of the tabs:

display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;

While this solution works, I am unsure if it is considered the best practice for material-ui implementation.

cssflexboxmaterial-ui

Answer №1

Have you thought about reorganizing your AppBar by moving its contents into a Toolbar and adding Tabs as the second element in the AppBar?

        <AppBar position="fixed">
          <Toolbar>
            <Typography variant="title" color="inherit">
              App Title, implement flexbox here
            </Typography>
          </Toolbar>
          <Tabs value={value} onChange={this.handleChange}>
            <Tab label="Item One" />
            <Tab label="Item Two" />
            <Tab label="Item Three" href="#basic-tabs" />
          </Tabs>
        </AppBar>

This arrangement allows you to customize your top toolbar and ensures that Tabs will always be positioned below it.

Take a look at this codesandbox for a demonstration of how this works.

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

Is there a way to align an image to the center using the display grid property?

Having some trouble centering an image within a 'display: grid' layout. Screenshot I attempted to use 'align-items' but it didn't seem to work either. Code: <section style="padding-top: 30px;"> <h4 sty ...

htmlcss

Eliminating padding or margin for figures in Bootstrap on smaller screens

I've been struggling to create a fullscreen image on small devices without any margin or padding. Unfortunately, the solutions suggested in this thread didn't work for me. Below is the code I'm currently using (tested on https://jsfiddle.n ...

htmlcssbootstrap-4

Obtain the background color of an element using the source attribute in Selenium WebDriver

Understanding the x-path is crucial, such as < img id="" src="/A/A/B.png" style=""> My task involves identifying the color of the image, but unfortunately, the style attribute does not provide any information about color. It only includes details a ...

htmlcssselenium

React Material-UI slider component with buffer feature

I am looking to enhance an audio player with the ability for users to seek to a specific time. Currently, I have implemented a linear progress element in material-ui to display the buffered progress, but it does not support the seek property. How can I i ...

reactjsmaterial-ui

Tips for achieving expansion of solely the clicked item and not the whole row

I am trying to create a card that contains a cocktail recipe. The card initially displays just the title, and when you click on a button, it should expand to show the full menu and description. The issue I'm facing is that when I click on one element, ...

javascriptreactjsmaterial-uimaterial-design

Splitting up database results into groups of three rows and then organizing them into Bootstrap4 rows in Laravel 7

Is it feasible to utilize bootstrap rows when retrieving data from the database? I have designed a layout with 3 columns and my objective is to showcase the database outcomes in these rows. In order to display 3 rows, each containing 3 items on every page, ...

phphtmlcsslaravelbootstrap-4

Creating CSS dynamically using PHP

Even after reading numerous blogs and forums, I'm still unable to get this working. My goal is to allow users to personalize their user account style sheet. I made sure to include <?php header("Content-type: text/css"); ?> at the beginning of t ...

phpcss

Incorporate a CSS design element in the lower right corner of the screen by adding a box

I'm looking to create a layout where a list of cards is displayed with maximize, minimize, and close buttons located at the bottom right of each card. The cards should be arranged from bottom right to left, but I'm having trouble achieving this p ...

htmlcssflexbox

Tips for Customizing the Width of Your Material UI Alert Bar

At the moment, I have refrained from using any additional styling or .css files on my webpage. The width of the Alert element currently spans across the entire page. Despite my attempts to specify the width in the code snippet below, no noticeable change ...

javascriptcssreactjstypescriptmaterial-ui

Show the time with AM/PM without displaying the year, month, or day

Currently, I am struggling to show the time as AM when my website loads using the format mm-dd-yyyy --:-- AM in a datetime-local input. The value attribute of datetime-local is causing some confusion for me. ...

javascripthtmlcss

Struggling to make the height attribute work in Bootstrap 4 alpha

I'm currently in the process of learning Bootstrap, and I've encountered an issue with the height attribute in version 4 (for example: "row h-25") not functioning properly. I attempted to add another CSS rule that sets the height of "container-f ...

htmlcssvisual-studiofrontendbootstrap-4

How can I make the lines of my drawer thicker in Material UI?

Currently, I'm in the process of implementing a left-side navigation bar for a web application I'm developing. The main challenge I'm facing is customizing the styles as desired when using the Drawer component. Specifically, I'm aiming ...

javascripthtmlcssmaterial-ui

Utilize a single image to encompass the entire background/theme

As a beginner, I am eager to learn how to use html and css. I understand the importance of being able to style an entire webpage in order to prevent issues like page overload or cache problems. Are there any easy-to-understand examples available for begi ...

htmlcss

What's the best way to incorporate necessary styles into text using particular fonts?

Is there a way to set letter spacing and word spacing for text on my website with the font 'classylight'? Adding classes to each post in the site map seems like a lengthy process. To save time, I attempted to use the attribute*=style property to ...

javascripthtmljquerycss

Is it possible that the HTTP module's deflate compression is only effective on specific CSS files and not all

I've been working on setting up mod deflate and gzip on my server, and while it's mostly functioning smoothly, I've noticed that not all files are being caught. It's not a matter of missing ALL javascript or CSS, but rather that some ar ...

cssapachecompressiongzipdeflate

What is the best way to implement a sub-menu using jQuery?

After successfully implementing a hover effect on my menu item using CSS, I am now struggling to make the sub-menu appear below the menu item upon hovering. Despite my efforts to search for jQuery solutions online, I have not been successful. Are there a ...

javascriptjqueryhtmlcss

Excessive vertical space is utilized by the vertical images in the CSS grid image gallery

My responsive CSS grid gallery is experiencing issues with vertical images disrupting the layout, as they appear at full size instead of remaining square like the others. How can I fix this problem? Thank you! Below is the code snippet: <div id=" ...

cssimagegrid

What is the process for retrieving the chosen country code using material-ui-phone-number?

When incorporating user input for phone numbers, I have opted to utilize a package titled material-ui-phone-number. However, the challenge arises when attempting to retrieve the country code to verify if the user has included a 0 after the code. This infor ...

javascriptreactjstypescriptmaterial-uilibphonenumber

Implement a feature in JavaScript that highlights the current menu item

I'm currently developing a website at and have implemented a JavaScript feature to highlight the current menu item with an arrow. The issue I'm facing is that when users scroll through the page using the scrollbar instead of clicking on the men ...

javascriptcssmenu

The Safari browser is plagued by a flickering issue with CSS perspective flip animations, even when using the back

I'm facing an issue with Safari (both desktop and iOS) related to a simple CSS flip animation. Despite searching through similar posts and answers, I haven't found a solution yet and am in need of a fresh perspective. Essentially, I am creating ...

htmlcsscss-animations