Place the application bar at the bottom of the screen

https://i.sstatic.net/0B0Ad.png

I am working on a project aimed at monitoring employees, and I have developed a user interface that allows for modifications within the site. However, there is an issue with the "bottom App Bar" section at the bottom of this interface which has a blue background. I need help fixing its style and ensuring that it stays fixed at the bottom of the page even when scrolling.

Furthermore, the "bottom app bar" is not appearing correctly on the page.

The first image depicts the design inspiration I'm aiming for, while the second image shows the current state of the page, missing the "bottom App bar".

https://i.sstatic.net/yLjmh.png

Any suggestions on how to solve this problem?

const drawerWidth = 240;

// Define styles using makeStyles
const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        // CSS styles go here
    }),
);

// Functional component MySettings
const MySettings: FC = () => {
    const classes = useStyles();

    return (
        <div className={classes.root}>
            {/* Content goes here */}
        </div>
    );
}

export default MySettings;

Answer №1

right here


        appBar: {
            [theme.breakpoints.up('sm')]: {
                width: `calc(100% - ${drawerWidth}px)`,
                marginLeft: drawerWidth,
            },
        },

you could potentially improve it by adding

                position: "fixed",
                bottom: 0

therefore including the following adjustments


        appBar: {
            [theme.breakpoints.up('sm')]: {
                width: `calc(100% - ${drawerWidth}px)`,
                marginLeft: drawerWidth,
                position: "fixed",
                bottom: 0
            },
        },

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

What is the best way to create a button that will trigger a modal window to display a message?

I am looking to create a button that will open a modal window displaying a message. However, when I tried to add a label and viewed the page, the desired window appeared on top of the rest of the content. But unfortunately, clicking the button did not prod ...

How can I keep a button element in place when resizing the window using CSS?

I'm currently experiencing an issue with my navbar where a button escapes from it when I resize the screen. Which CSS property should I modify to ensure that the button remains inside the navbar and doesn't escape? Here is a JFiddle link demonst ...

How to Retrieve the href Property of a NextJs Link in a Child Component

I'm currently implementing an interactive button feature using NextJs. Currently, each button is wrapped in a Next link component like this: <Link href={href} key={key} passHref> <MenuItem disableRipple style={{ color: router.p ...

Application experiencing server error when updating MongoDB data

I have encountered an issue while trying to update/modify data that has already been uploaded in a reactjs project using mongoDB as the database. Whenever I attempt to update the data, an error is displayed. How can this problem be resolved? https://i.sta ...

The troubleshooting of compatibility issues between TailwindCSS and HTML Input and Button tags

Recently, I decided to switch from using plain CSS to TailwindCSS for styling the navbar component that I obtained from the Bootstrap website. While TailwindCSS has helped me style most parts of the navbar successfully, I have encountered a challenge with ...

Creating a User Interface Table with Selectable Cells in Material Design

I am currently developing a weekly event scheduler where users can select one or more table cells to add events. However, I am encountering issues with making each cell selectable and identifying the specific cell being clicked during a click event. class ...

Horizontally align the label with the Checkbox

Hi everyone, I'm new to this forum and I've encountered a problem that I am struggling to resolve. The issue lies with a table containing a checkbox list. Initially, everything looks fine when I use: display:inline-block; However, on small ...

What is the best way to create a border of white space around the background color of a table cell using CSS?

Is there a way to create a white space around the background color of a table cell using CSS? My current code has the background color extend all the way to the edge, and padding only affects the content, not the background color. #main-monitor { widt ...

Ensure that the contents of the upper and lower divs are appropriately aligned, while maintaining the centered positioning of the

As a complete beginner in the world of HTML and CSS, I am facing a challenge with my code. Here's the HTML snippet: <section class="instructions"> <div class="row"> <div class="instructions-col" ...

Hovering over an image will not cause the floating header to appear

My attempt to create a header that fades with scroll and appears on hover is working perfectly, except for the cat pictures in the Portfolio section. Despite adjusting z-indexes and trying various solutions, the header just won't show up over the h4 e ...

Having a bottom border only on input fields appears strange when viewed on a mobile device

When trying to achieve a bottom border on mobile, I encountered an unexpected issue where a strange line appeared instead in the browser. Here is an image of the problem: https://i.sstatic.net/PqEOF.jpg I expected to see a straight line as intended (it w ...

What is the best way to center align cards using MUI?

I am facing an issue with my grid display using MUI where the cards are stuck to the left side of the page. Even after trying various properties like justify='center', mx: 'auto', and alignItems='center', the cards refuse to a ...

The row attribute in the radio group does not interact with the TextField component in @mui/[email protected]

I'm trying to incorporate a TextField startAdornment with a radio group inside it, but I'm struggling to get the group aligned horizontally as the row attribute seems to have no effect and they are displayed vertically. Any tips on how to achieve ...

Creating multiple div elements with changing content dynamically

I am facing an issue with a div named 'red' on my website where user messages overflow the 40px length of the div. To prevent this, I want to duplicate the 'red' div every time a message is sent so that the messages stay within the boun ...

Struggling to combine select dropdown choices in one calculation

​​I'm currently working on a project where I need to create a website that multiplies three numbers selected from dropdown menus together. However, when I attempt to perform the calculation, I only get the result "1" displayed. I've spent sev ...

Ways to display an icon in Angular 10 only when it is hovered over

Just getting started with Angular and still learning the concepts. Trying to figure out how to show an icon only when it's hovered over. Can anyone assist me? Sorry, can't share the code because of company rules. The icons are for sorting and ...

Problems with the bottom section

Is there a way to make the middle section extend downwards when the window is resized, keeping the footer at the bottom without overlapping with the content? If anyone has suggestions on how to achieve this, please share! I'm hoping there's a b ...

Perpetual spinning of image grid

Are there any jQuery libraries available for continuous image rotation within an array? I have a collection of 30 partner logos that I would like to rotate continuously using either a jQuery library or plain CSS code. These images and information will be l ...

Mastering Theme Transformation with SASS

My website is constructed using SASS, and I am facing an issue where the variables I set for light and dark themes are not changing as expected. Whenever I switch between themes, all variables revert to their original values, making it difficult for me to ...

Struggling with CSS due to the INCLUDE Function

After downloading a Template + CSS File for the website I am working on, everything was going smoothly until I decided to break down the template into separate files for easier modification and editing in the future. However, once I cut out the head sectio ...