Placing <IconButton> at the bottom right of <Paper> using React and Material UI without utilizing FAB

Issue:

I'm working on implementing a react/material-ui design where I want to show an edit icon floating in the bottom right corner of a paper element. I've managed to get it to float in the bottom right of the entire screen, but that's not what I need for this particular case.

Current Situation:

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

Desired Outcome: https://i.sstatic.net/vQC0r.png

I need the Icon Button to hover over the bottom right corner of the paper component.

<Paper classnName={classes.paper}>

    <IconButton
      onClick={handleVisionEditCick}
      style={{ position: "???", bottom: 3, right: 3 }}
     >
        <EditIcon className={classes.EditIcon} />
    </IconButton>
    <Typography variant="h5" component="span" color="textPrimary">
         {vision}
    </Typography>
</Paper>
cssreactjsmaterial-ui

Answer №1

While not the optimal solution, consider utilizing Grid for this task


      <Grid container justify="flex-end" alignItems="flex-end">
        <IconButton style={{ bottom: 3, right: 3 }}>
          <Edit className={classes.EditIcon} />
        </IconButton>
      </Grid>

Take a look at this example

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

The 'id' key is causing issues in React when used for mapping

While working on my simple messaging app, I encountered an issue where updating the same div with a new message was successful, but adding a new div for each message was not. Initially, I tried using index while mapping the messages to display, but it did ...

javascriptreactjsmappingreact-context

Diverse Selection of Font Awesome Icons

In my React project with TypeScript, I have a header component that accepts an Icon name as prop and then renders it. I am trying to figure out the best way to ensure that the icon prop type matches one of the existing FontAwesome Icons. import { FontAwe ...

reactjstypescriptfont-awesome

Overruled fashion

Here is the HTML code from my custom page: <div class="notes quotes-notification member-savings f-left"> <h2>My Notifications</h2> <ul> <li><b>I need to make some changes in the HTML, different from other pages you have ...

htmlcss

Creating an inverted curve or border-radius for a div element is a design technique that can add

I've been tackling a project that requires me to style the border of a div in an inverted manner. To achieve this, I'm limited to using only CSS and JS without any plugins. I've searched through various online resources and similar questions ...

javascriptjqueryhtmlcss

During the process of addressing: [email protected] (legacy React project)

Recently, I revisited my React app after a long hiatus. Upon cloning the repository, I proceeded to run npm i only to encounter the following errors: > npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! > npm ERR! While resolving: & ...

reactjsnpm

What is the best way to utilize the sx prop in Material UI for applying styles specifically when the component is active or selected?

In the code snippet below, I have set up the useState hook so that when a ListItem is clicked on, the selected state becomes true. My goal is to apply specific styling when an item is selected using the sx prop instead of creating a styled component for su ...

javascriptcssreactjsmaterial-uifrontend

Incorporate the key as a prop within a Child Component in a React application

I am trying to display a list of elements in React, where the key of each element is used as an index in front of the item. However, when I try to access props.key, it just returns undefined. Does anyone have any suggestions on how to access the key proper ...

javascriptreactjs

Customizing font sizes for individual fonts within the same font family

I am designing a website in a language other than English. This means that the text on the webpage will be a mixture of English and other languages. In order to make sure the text displays correctly, I have set the font-family like this: p{ font-family: ...

cssfonts

The useState function is failing to update the variable

I am currently using google-map-react to showcase locations on Google Map while incorporating an auto-suggestion feature. You can find an example similar to what I'm working on at this link: . Since my code is in Typescript, it varies slightly from th ...

reactjsreact-hooksuse-effectuse-stategoogle-map-react

The Mechanics of Running "npm start" in create-react-apps

Can you explain what activity occurs behind the scenes when the npm start command is executed? Does it create a web server to facilitate communication between your browser and the application? ...

reactjscreate-react-app

Using React to implement MUI autocomplete feature alongside a MUI form

Recently, I have been utilizing a MUI form structured in the following manner: <Box component="form" onSubmit={event => { return handleSubmit(event); }} noValidate sx={{mt: 1}}> <TextField margin="normal" ...

javascriptreactjstypescriptreact-hooksmaterial-ui

Enhancing Material UI datepicker with custom CSS styles, including cursor pointer effects

I am facing an issue with my Material UI datepicker component in React. The cursor is not showing and the icon I added is not clickable, resulting in the datepicker dialog not appearing. Despite trying inline styling and styled-components, I have been una ...

reactjsmaterial-ui

Dynamically adjusting the width of an HTML element with ng-style using percentage values in AngularJS

I am facing a challenge where I need to display a progress bar in my UI based on a percentage value stored in a JSON response object. Here is an example of the JSON object: { completionPercent: 42 } The desired UI outcome should look like this: ┌ ...

javascriptcssjsonangularjsdata-binding

Tips for ensuring the footer remains at the bottom of the page

I'm struggling with positioning my footer at the bottom of the page. No matter what I try, it just doesn't look right. Here's the code snippet I've been working with: <div id="footer"> <div class="container"> <div ...

htmlcssbootstrap-4

How can I turn off a state property?

My goal is to detect if the user is using a device with a screen width smaller than 768px, and if they are, I want to set isTop to false. However, I am encountering some difficulties. Everything seems fine, but I keep receiving this error: TypeError: _t ...

javascriptreactjsgatsby

Customizing the CSS of the TinyMCE editor within a React application

Incorporating TinyMCE 5 into my React project has been an interesting challenge. I'm looking to personalize the editor by adjusting elements like borders and adding box shadows to the toolbar. Despite attempting to add CSS through the content_css prop ...

javascriptcssreactjstinymce-5

Accessing the web3 attribute from the React-Web3 provider to enhance functionality

I'm struggling to understand the basic functionality of react-web3-provider My component structure is as follows: import React, { Component } from "react" import { withWeb3 } from 'react-web3-provider'; import Web3 from 'web ...

javascriptreactjsweb3-react

Unsuccessful invocation of React's componentDidMount method

Our UI designer created a Tabs component in React that allows for selecting and rendering child components based on index. However, I am facing an issue where the componentDidMount function is not being called when switching between tabs. I have implement ...

reactjstypescript

Dynamic routing in Next.js with express leads to the refreshing of the page

I am facing an issue with my Next.js blog application that I built using an express custom browser. Whenever I click on a Link to route to '/blog/article-1', the page refreshes upon arrival at the destination. How can I prevent this from happenin ...

reactjsexpressnext.js

Can someone explain how to use JavaScript to make table data fill the entire row in a table?

After clicking the button, the layout of the table changes. I want to keep the original table layout even after the JavaScript function runs. I am still learning about JavaScript. function toggle(button) { if(document.getElementById("1").value=="Show ...

javascripthtmlcss