Tips for maintaining a stationary element with fluctuating height positioned at the bottom in React

Question

Tips for maintaining a stationary element with fluctuating height positioned at the bottom in React

I am trying to create a fixed element with dynamic height, meaning its size changes when the browser window is resized. You can see an example of what I'm talking about here: https://stackblitz.com/edit/react-yuqarh?file=demo.tsx

This element acts like a menu and should:

open automatically on first load (working)
hide when the user clicks "hide" (partially working)
open when the user clicks on a menu icon (working)

When the element is hidden, I use a negative bottom value to hide it. However, this value remains fixed even as the height of the element changes due to browser resizing, causing the element to disappear.

Just to clarify, this element is actually a search component with some input fields, but I've simplified it for this example.

javascript css reactjs material-ui

Answer 1

Answer №1

To reposition this element outside the visible area, consider using transform: translateY(100%); instead of setting bottom to -125px

import * as React from 'react';
import MenuIcon from '@mui/icons-material/Menu';
import { IconButton, Box, Button, Grid } from '@mui/material';
export default function Demo() {
  const [transform, setTransform] = React.useState('0px');

  return (
    <div style={{ position: 'fixed', bottom: '0px', transform: `translateY(${transform})` }}>
      <div>
        <IconButton onClick={() => setTransform('0')}>
          <MenuIcon />
        </IconButton>
        <Box>
          <Grid container>
            <Box
              sx={{ height: '50px', width: '150px', backgroundColor: 'red' }}
            ></Box>
            <Box
              sx={{ height: '30px', width: '150px', backgroundColor: 'grey' }}
            ></Box>
          </Grid>
          <Button onClick={() => setTransform('calc(100% - 40px)')}>hide</Button>
        </Box>
      </div>
    </div>
  );
}

Answer 2

To reposition this element outside the visible area, consider using transform: translateY(100%); instead of setting bottom to -125px

import * as React from 'react';
import MenuIcon from '@mui/icons-material/Menu';
import { IconButton, Box, Button, Grid } from '@mui/material';
export default function Demo() {
  const [transform, setTransform] = React.useState('0px');

  return (
    <div style={{ position: 'fixed', bottom: '0px', transform: `translateY(${transform})` }}>
      <div>
        <IconButton onClick={() => setTransform('0')}>
          <MenuIcon />
        </IconButton>
        <Box>
          <Grid container>
            <Box
              sx={{ height: '50px', width: '150px', backgroundColor: 'red' }}
            ></Box>
            <Box
              sx={{ height: '30px', width: '150px', backgroundColor: 'grey' }}
            ></Box>
          </Grid>
          <Button onClick={() => setTransform('calc(100% - 40px)')}>hide</Button>
        </Box>
      </div>
    </div>
  );
}

Answer 3

Answer №2

This code snippet is all set to go

import * as React from 'react';
import MenuIcon from '@mui/icons-material/Menu';
import { IconButton, Box, Button, Grid } from '@mui/material';
export default function Showcase() {
  const [open, setOpen] = React.useState(true);
  return (
    <div style={{ position: 'fixed', bottom: 0 }}>
      <div>
        <IconButton onClick={() => setOpen(!open)}>
          <MenuIcon />
        </IconButton>
        {open && (
          <Box>
            <Grid container>
              <Box
                sx={{ height: '50px', width: '150px', backgroundColor: 'red' }}
              ></Box>
              <Box
                sx={{ height: '30px', width: '150px', backgroundColor: 'grey' }}
              ></Box>
            </Grid>
          </Box>
        )}
      </div>
    </div>
  );
}

Answer 4

This code snippet is all set to go

import * as React from 'react';
import MenuIcon from '@mui/icons-material/Menu';
import { IconButton, Box, Button, Grid } from '@mui/material';
export default function Showcase() {
  const [open, setOpen] = React.useState(true);
  return (
    <div style={{ position: 'fixed', bottom: 0 }}>
      <div>
        <IconButton onClick={() => setOpen(!open)}>
          <MenuIcon />
        </IconButton>
        {open && (
          <Box>
            <Grid container>
              <Box
                sx={{ height: '50px', width: '150px', backgroundColor: 'red' }}
              ></Box>
              <Box
                sx={{ height: '30px', width: '150px', backgroundColor: 'grey' }}
              ></Box>
            </Grid>
          </Box>
        )}
      </div>
    </div>
  );
}

Answer 5

Answer №3

Conditional rendering is an important aspect to consider in solving the issue at hand. If we opt not to implement it, the alternative solution would involve extracting the burger menu from the disappearing div. Here's how you can achieve this:

export default function Demo() {
  const [showMenu, setShowMenu] = React.useState('0px');

  return (
    <>
      <IconButton onClick={() => setShowMenu('0px')}>
        <MenuIcon />
      </IconButton>
      <div style={{ position: 'fixed', bottom: showMenu }}>
        <div>
          <Box>
            <Grid container>
              <Box
                sx={{ height: '50px', width: '150px', backgroundColor: 'red' }}
              ></Box>
              <Box
                sx={{ height: '30px', width: '150px', backgroundColor: 'grey' }}
              ></Box>
            </Grid>
            <Button onClick={() => setShowMenu('-125px')}>hide</Button>
          </Box>
        </div>
      </div>
    </>
  );
}

Consider creating a custom hook like useToggle for better management of showing/hiding elements. This will streamline your code and make it easier to reuse in other components.

Answer 6

Conditional rendering is an important aspect to consider in solving the issue at hand. If we opt not to implement it, the alternative solution would involve extracting the burger menu from the disappearing div. Here's how you can achieve this:

export default function Demo() {
  const [showMenu, setShowMenu] = React.useState('0px');

  return (
    <>
      <IconButton onClick={() => setShowMenu('0px')}>
        <MenuIcon />
      </IconButton>
      <div style={{ position: 'fixed', bottom: showMenu }}>
        <div>
          <Box>
            <Grid container>
              <Box
                sx={{ height: '50px', width: '150px', backgroundColor: 'red' }}
              ></Box>
              <Box
                sx={{ height: '30px', width: '150px', backgroundColor: 'grey' }}
              ></Box>
            </Grid>
            <Button onClick={() => setShowMenu('-125px')}>hide</Button>
          </Box>
        </div>
      </div>
    </>
  );
}

Consider creating a custom hook like useToggle for better management of showing/hiding elements. This will streamline your code and make it easier to reuse in other components.

Tips for maintaining a stationary element with fluctuating height positioned at the bottom in React

Answer №1

Answer №2

Answer №3

Similar questions

Showcase -solely one property object- from numerous property objects enclosed within an array

A guide to creating a synchronous AJAX call using vanilla JavaScript

Ways to discover the titles of every sub-directory

What is the process for toggling a button using Vue.js?

React: Resolving the issue of "children" property not found in type "IntrinsicAttributes & Props"

jQuery sliding tabs

JavaScript encounters an error when trying to create a MarkLogic instance with an array

Tips on incorporating a URL from a text file into a string

The integration of Tinymce and Vuetify dialog is causing issues where users are unable to input text in the source code editor or add code samples

What are some strategies I can use to prevent issues with my web design while updating bootstrap?

Creating code that is easily testable for a unique test scenario

Utilize a variable within a regular expression

Troubles with image uploading on MERN stack with multer are preventing functionality

Ways to reset the input field of Material UI

Struggling to determine if the checkbox has been ticked?

Can you determine the height of an image if only the width and border width are provided?

When working with React Native, encountering an issue where passing props using the Map function results in an error stating "undefined is not a function" near the section of code involving the

Seeking an efficient localStorage method for easy table modification (HTML page provided)

Error message in console: React Form showing "Form submission canceled due to lack of connection" despite successful submission

html displaying dynamic data in a table