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

Customize the appearance of semantic-ui-react components with hover effects

Navigating through Expression Engine and utilizing conditional statements

Incorporating Bootstrap's Inline Design Elements

Ensuring Consistent Headings While Scrolling

What is the best way to enlarge a Material UI card?

Encountering a vast expanse of empty white void

The padding of DateTimePicker from Material UI gets altered upon reloading the page

How can I showcase Bootstrap cards horizontally within a razor foreach iteration?

In ReactJS, when you encounter TextField values that are "undefined", it is important to handle them appropriately

How to properly pass arguments in React component constructor using the binding method

What are the ways to incorporate the width property in @media queries within CSS?

Moving the sidebar from the app component to a separate component in Angular results in a situation where the sidebar does not maintain full height when the page is scrolled down

Switching out one block of HTML with another in JavaScript is a powerful way to dynamically update

The footer is anchored at the bottom on one page but mysteriously relocates to the center on the next page

Tips on aligning images of various sizes with text within a row using CSS

Animation does not trigger before switching pages

Guide to changing the background color of material ui drawer component using styled-components

Steps for placing my material ui app drawer below the header:

Show only the populated fields in a user profile with ReactJS

Strategies for Resolving the IE 8 Issue with Table Row Background Images