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

How to set a canvas as the background of a div element

Check out my code snippet below: <!DOCTYPE html> <html> <body> <div id='rect' style='width:200px;height:200px;border:1px solid red'> </div> <canvas id="myCanvas" style="borde ...

javascripthtmlcsscanvas

Increased pixels being incorporated into my line spacing

Looking for a solution: A <div> containing only one word at a font size of 16px with a line-height set to 1. Encountering issues with extra space above the text in Chrome and Firefox, while the text bleeds slightly out of the bottom. IE exacerbates t ...

css

Embed video with a custom thumbnail in an iframe

Hello everyone! I'm a first-time user on stackoverflow seeking some help. Currently, I am using Dreamweaver to work with HTML and CSS in order to build a website. My task involves sourcing a video from a television archive and embedding it onto my si ...

htmlcssiframedreamweaver

What is the best way to add a condition to the renderCell function within a material-ui GridColDef component?

I am currently utilizing the Mui Grid component and aiming to display the content of a column based on certain data conditions. Could someone guide me on how to incorporate a conditional statement in the renderCell method? const columns: GridColDef[] = [ ...

reactjsmaterial-ui

Placing emphasis on a link's destination

Is there a way to automatically focus on an input field after clicking on a local href link? For example, I have the following: <a href="#bottom"> Sign up </a> And at the bottom of the page : <div id="bottom"> <input type="email" nam ...

htmlcssfocus

Issue with MUI 5 Button component not receiving all necessary props

Currently, I am attempting to create a customized MUI5-based button in a separate component with the following code: import {Button, buttonClasses, ButtonProps, styled} from '@mui/material'; interface MxFlatButtonProps extends Omit<ButtonProp ...

reactjstypescriptmaterial-uistyled-components

How to truncate text in a cell of a Vuetify data table using CSS styling

Is there a way to truncate text in a cell using CSS without it wrapping around or overflowing? The ideal CSS code should include: .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } However, the current implementation caus ...

cssvue.jsvuetify.js

``Text Aligns Perfectly in the Middle Horizontally, yet Shifts Slightly Off-C

Two rectangular divs were created, each measuring 60px wide and 150px tall with text inside. The goal was to align the text vertically within the rectangles, achieved by using transform: rotate(-90deg). The challenge arose when trying to center the vertic ...

htmlcss

Display everything when an option is clicked

I have a filter that is working perfectly. When I select a specific category, it filters out only rows with that category. However, I am stuck on how to display all rows again after clicking on the first option. My objective is to show all rows when "Categ ...

javascripthtmljquerycss

Position fixed iframe neglects right and bottom positioning

Here is the code snippet I am working with: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head></head> <body> <iframe src="htt ...

cssiframeposition

Whenever a button is clicked in a custom column rendering of a React material table, the sorted state is lost. This issue occurs whenever any state update is triggered

I encountered an issue with my code involving a Collapsible list triggered by an Icon Button. After sorting the table and then expanding the list, the table reverts back to its original unsorted state. I am puzzled as to why this is happening. <Material ...

reactjswebmaterial-uimaterial-table

HTML/CSS: Maintain Hover-Over Pop Up Boxes in Position Until Another Element is Hovered Over

Seeking HTML code to maintain a hover-over pop-up box in position on an image map until another section of the image map is hovered over. For example, refer to my code below - when hovering over a country on the map, a pop-up box with information about a ...

htmlcss

Display a background color behind an <img> element when the image's dimensions are smaller than the page

Currently, I am utilizing the following CSS for styling an image - check it out here img { border: 3px solid #ddd; margin-left: auto; display: block; margin-right: auto; background: red; } If you would like to view the output, click on this link - see it ...

htmlcss

Implemented an HTML hyperlink element precisely positioned

I have the following HTML code. I am trying to fix the position of an anchor tag called "View All" so that it stays in a specific location. However, whenever the value in the dropdown menu changes, the anchor tag moves according to the length of the new se ...

htmlcss

The issue with the <Button> component not properly linking in next.js

Having trouble with a button wrapped inside a custom Navbar component. The code snippet in question is: <NavBtn> <Link href="/contact" passHref> <Button> Contact Me </Button> </Link> & ...

javascriptcssreactjsnext.jsstyled-components

The overlay background is being obscured by surrounding elements

Hey there! I'm experimenting with some basic coding and ran into an issue with an overlay. Here's the site link: Sorry for the strange language. :-) If you click on the button with the tiny icon, you'll notice that the overlay form isn&apos ...

javascriptjqueryhtmlcss

What is the best way to position my two icons next to each other in the footer of my React application?

I'm struggling with styling the footer of my react portfolio project. I specifically want to include Github and LinkedIn icons side-by-side at the bottom of the screen, but currently, they are stacked vertically in the middle of the page with too much ...

cssreactjssingle-page-applicationreact-bootstrapfooter

What causes materialui styles to vanish upon refreshing in nextjs?

After consulting the materialui documentation (https://material-ui.com/guides/server-rendering/), I was able to find a solution, but I am still unsure of the underlying reason. Why does the style work initially during rendering but disappear upon subs ...

cssmaterial-uinext.jsserver-side-rendering

Expanding borders occur when the element is repositioned using the translate property

I am trying to create a vertical line that remains in the center of a div container regardless of the screen size. I want this line to be 1px thick. However, when I use transform: translate(-50%, -50%);, the border seems to become thicker than expected. Be ...

htmlcss

The individual blog pages on my site are not receiving the static files they need to display

I'm facing an issue serving a css file to individual blog posts on my website's blog section. Here's how it's supposed to work: Visit /blog- you'll see the main blog page, which is functioning fine. However, when trying to access ...

cssnode.jsexpresspug