Ways to slightly tilt an image in Material-UI

I am having trouble displaying my cactus partially above my dialog without it getting cut off when I apply certain styles.

Could someone please point out what I might be doing wrong?

Here are the styles for the cactus:

cactus: {
  position: 'absolute',
  top: -20,
  left: 30,
  backgroundColor: '#fff',
  width: '60px',
  height: '60px',
},

Just to clarify, I am using Material-UI and React for this project.

Here is the full code snippet -

import React, { useState } from 'react';
import {
  DialogTitle,
  Typography,
  IconButton,
  Divider,
  DialogContent,
  Button,
  Grid,
  TextField,
  Collapse,
  Avatar,
} from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import Dialog from './Dialog';
import { IoCloseSharp } from 'react-icons/io5';
import Cactus from '../../Assets/cactus.svg';

const CreateBatchDialog = ({ open, close }) => {
  const classes = useStyles();

  const [test, setTest] = useState(false);

  return (
    <Dialog open={open} onClose={close} maxWidth="sm">
      <Avatar className={classes.cactus}>
        <img src={Cactus} alt="cactus" height="50px" width="50px" />
      </Avatar>
      <DialogTitle>
        <div className={classes.header}>
          <Typography variant="h5">Join Batch</Typography>
        </div>
        <IconButton className={classes.close} onClick={close}>
          <IoCloseSharp />
        </IconButton>
      </DialogTitle>

      <Divider />

      <DialogContent className={classes.content}>
        <Grid spacing={2} container>
          <Grid item xs={10}>
            <TextField fullWidth variant="outlined" placeholder="Batch Name" />
          </Grid>
          <Grid item xs={2} className={classes.btnContainer}>
            <Button
              fullWidth
              variant="contained"
              className={classes.btn}
              onClick={() => setTest((prev) => !prev)}
            >
              Join
            </Button>
          </Grid>
        </Grid>

        <Collapse in={test} className={classes.error}>
          <Typography align="left">
            * Placeholder for any error messages
          </Typography>
        </Collapse>
      </DialogContent>
    </Dialog>
  );
};

const useStyles = makeStyles({
  header: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  },
  close: {
    position: 'absolute',
    right: 10,
    top: 12,
  },
  content: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    padding: '30px',
  },
  actions: {
    padding: '20px',
  },
  btn: {
    padding: '12px 16px',
    borderRadius: 8,
    backgroundColor: 'rgba(24, 119, 242, 0.5)',

    '&:hover': {
      backgroundColor: 'rgba(24, 119, 242, 0.5)',
    },
  },
  btnContainer: {
    display: 'flex',
  },
  error: {
    width: '100%',
    margin: '20px 0px 0px 0px',
    color: 'crimson',
  },
  cactus: {
    position: 'absolute',
    top: 0,
    left: 30,
    backgroundColor: '#fff',
    width: '60px',
    height: '60px',
  },
});

export default CreateBatchDialog;

I have already attempted some solutions, one of which was adding this line:

transform: 'translate(50%, -50%)',

However, the results remained the same as shown in the image above.

Answer №2

It's possible that the modal or dialog box you're using has a CSS style of overflow: hidden. In that case, you will need to adjust it to overflow: auto

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

Is it possible to send properties to a React Component using a regular function?

import C from './C.js'; const Solution = () => { async function fetchData() { await axios .get(`http://localhost:2000/?url=${link}`) .then((response) => { <C data={response.data} / ...

What could be causing the footer to not show up at the bottom of the page?

I've encountered an issue with my code where the footer appears to be stuck at the bottom of the h2_c div instead of the bottom of the .content div where it should be. I have tried using positioning but it hasn't resolved the problem. Thank You. ...

HTML file unable to connect with CSS stylesheet

I'm facing an issue where my CSS stylesheet and HTML files aren't linking properly. Here is the code snippet from my HTML file: <head> <title>Website Sample</title> <meta charset="UTF-8"> <meta http-equiv= ...

A beginner's guide to importing modules in Node.js

Whenever I attempt to import into my nodejs file, I consistently encounter the error message stating "cannot import outside a module." I have experimented with various solutions found on StackOverFlow, such as including "type":"module" ...

Modifying radio inputs to update when a state variable is altered in react.js

In my HTML, I have a div that includes 4 radio inputs, and another div with an onClick event that increments a counter. Every time I click on the div, I want the radio inputs to reload so that no input is selected. Below is the code snippet: 'use clie ...

Attitude: Defiant and Ignoring Authority

So far, no suggestions have been made, indicating that maybe I haven't properly summarized the issue; The problem arises when I absolutely position the section with the class="container" using an additional class or id specific to that <div>. I ...

What is the best practice for creating helper functions in React components?

I have noticed a recurring issue of code duplication in my projects, particularly with basic helper functions like the one shown below: function percentageWithCommas(x?) { try { return (x * 100).toLocaleString("en-UK", { maximumFractionDigits: ...

ReactJS is constantly monitoring local storage for any new updates

Within my form, I prompt users to provide input which I then store in the local storage for later use. let shape = { shape: shape, color: shapeColor, dimension: noOfDimension, } arr.push(shape) window.localStorage.setItem("arr", JSON.str ...

Guide to importing JavaScript in an npm package using TypeScript and JavaScript

I recently downloaded a library that includes both Typescript and its corresponding javascript version. Despite trying to declare import Library from "@scope/library", my application is only able to access the Typescript version, even after adding the .js ...

How can I assign a default value in a material-UI select box within a React component after retrieving data from an API?

I am trying to implement the Select Box from MUI in a simple way, similar to the one shown in this MUI demo. The only issue I'm facing is that my default value needs to be updated after an API call. So, I need to 'Update' the default valu ...

Encountering a deployment issue while trying to launch a NextJs app on Amplify

I'm encountering issues while trying to deploy my NextJs app on AWS Amplify. Here's a snippet from my package.json: { "name": "bytecho", "version": "0.1.0", "private": true, "scripts ...

The declaration file for module 'react-scroll-to-bottom' appears to be missing

I recently added react-scroll-to-bottom to my project and it is listed in my dependencies. However, I am encountering the following error: Could not find a declaration file for module 'react-scroll-to-bottom'. The path 'c:/Users/J/Desktop/w ...

Rotating an input 90 degrees within a div for unique positioning

I used JavaScript to make an input range vertical, like so: var range_pitch = document.createElement("input"); range_pitch.setAttribute("type", "range"); range_pitch.style.webkitTransform = "rotate(90deg)"; range_pitch.style.mozTransform = "rotate(90deg)" ...

I am currently facing an issue with loading my NextJS website

I'm currently facing an issue with the performance analytics on Vercel for my NextJS application. Despite compressing images and optimizing CSS, the results are consistently low and I can't pinpoint the exact cause. Could it be related to a comp ...

Issue with displaying Favicon on staging server

I need assistance with this issue. I am working to show a title and logo on a tab. It is functioning correctly on my local machine, but the logo is not appearing on the staging server. <title>Global</title> <link type="image/png" href ...

Tips for troubleshooting getStaticProps (and getStaticPaths) in Next.js

Currently, I am attempting to troubleshoot the getStaticProps() function within a React component that is being utilized from my pages by implementing console.log() like so: export default class Nav extends React.Component { render() { return & ...

Displaying Edit and Delete options upon hovering over the data row

I'm working on a table that uses ng-repeat on the <tr> element. In the last column of each row, I have edit/delete links that should only be visible when the user hovers over the <tr> element. <tr ng-repeat="form in allData | filter:se ...

Maintaining Portrait Lock for Viewport in HTML5/CSS3: A Guide

Can the orientation of a mobile device's view port be locked to portrait mode? I tried searching for a solution on Google, but was unable to find clear instructions on how to achieve this. ...

Blank page issue with Electron and React-BoilerPlate

While my app works flawlessly in Dev mode, it fails to function properly in Production. My folder structure is organized as follows: (build,dist,node_modules,public,src). build dist node_modules public Main.js index.html src index.tsx Within my packa ...

The performance of my SVG Filter is dismal

Here is the SVG filter I am using: <svg style="visibility: hidden; height: 0; width: 0;"> <filter id="rgbShift"> <feOffset in="SourceGraphic" dx="1" dy="-1" result="text1" /> <feFlood flood-color="#FF0000" result=" ...