MUI enables the creation of a fixed vertical box anchored at the bottom of the screen

Question

MUI enables the creation of a fixed vertical box anchored at the bottom of the screen

I’ve attempted the following so far:

import "./styles.css";
import { Box, Typography } from "@mui/material";
import styled from "@emotion/styled";
export default function App() {
  const MainStyle = styled("div")(({ theme }) => ({
    position: "fixed",
    zIndex: 99999,
    right: 0,
    bottom: 0
  }));
  return (
    <MainStyle>
      <Box sx={{ transform: "rotate(-90deg)", backgroundColor: "blue" }}>
        <Typography sx={{ color: "white" }}>CHAT WITH US!</Typography>
      </Box>
    </MainStyle>
  );
}

The issue I’m facing is that half of the box extends off the screen and doesn’t align all the way to the right.https://i.stack.imgur.com/aolXr.png

My objective is to have it positioned in the right corner with the entire box visible, similar to how displays their "chat with us, we are online" prompt, but specifically on the right side.

css material-ui

Answer 1

Answer №1

writing-mode: vertical-lr; is a useful CSS property that can be implemented in your code.

To see an HTML example showcasing the use of writing-mode: vertical-lr, visit this resource.

.content {
  position: relative;
}

.text {
  writing-mode: vertical-lr;
  border: 2px solid #000;
  position: absolute;
  top: 15px;
  right: 15px;
  height: 120px;
}

<div class="content">
  <p class="text">Sample text</p>
</div>

Answer 2

writing-mode: vertical-lr; is a useful CSS property that can be implemented in your code.

To see an HTML example showcasing the use of writing-mode: vertical-lr, visit this resource.

.content {
  position: relative;
}

.text {
  writing-mode: vertical-lr;
  border: 2px solid #000;
  position: absolute;
  top: 15px;
  right: 15px;
  height: 120px;
}

<div class="content">
  <p class="text">Sample text</p>
</div>

MUI enables the creation of a fixed vertical box anchored at the bottom of the screen

Answer №1

Similar questions

Populate two MUI-Autocomplete fields by selecting one item

Designing websites or applications for mobile devices requires careful consideration of how content will

displaying a video within an iframe without occupying the entire screen

Unable to generate file with Compass

Is there a way to conceal one column in a row and display only the second column from a medium screen to a small screen using Bootstrap 5?

Setting a constant width for text characters across all devices using CSS and HTML

How can I prevent the MUI date picker from automatically displaying today's date when the page loads?

Is it feasible to design a draggable Material UI dialog with an embedded Autocomplete feature?

Ways to remove the default classes added by ngbootstrap

What steps can be taken to resolve the issue with the background's placement?

Arrange divs in a grid layout with evenly distributed dynamic spacing

Using AJAX to refresh a div upon submitting a form, instead of reloading the entire page

Tips for adjusting image and div sizes dynamically according to the window size

Text centered over an animated underline using CSS

Steps to position an image without a background in the middle of a smaller container:

When will the search bar toggle and the logo appear sliding down?

Column with space between arranged rows in a container

The alignment of Bootstrap input fields is off center

The correct Loader for managing this specific file format - Next.js

What could be causing the submenus in my intricate menu component to lose focus when input is entered?