Trying to align a Material UI button to the right within a grid item

I'm attempting to right float the button below using material-ui, but I'm unsure of how to achieve this:

         <Grid item xs={2}>
            <Button
              variant="contained" 
              color="secondary"
              disableElevation
              startIcon={(<DeleteOutlineIcon size="0.9rem"/>)}
              onClick={() => arrayHelpers.remove(index)}  
            >
              Remove
            </Button>}                    
          </Grid>

I'm also uncertain if I need to add padding-left to the button, and I'm hoping for a cleaner solution.

I attempted justify="flex-end", but unfortunately, it didn't work as expected.

Answer №1

Make sure to enclose your button within a div element with the specified class and styling:

<Grid item xs={2}>
          <div className="custom-wrapper">
            <Button
              variant="contained"
              color="primary"
              disableElevation
              startIcon={<AddCircleIcon size="1rem" />}
              onClick={() => {}}
            >
              Add Item
            </Button>
          </div>
        </Grid>

styles.css :

.custom-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 10px;
}

Answer №2

Take a look at my approach:

<Box      
  container
  direction="row"
  justify="flex-end"
  alignItems="center"
>
  <Button
    variant="contained" 
    color="secondary"
    disableElevation
    startIcon={(<DeleteOutlineIcon size="0.9rem"/>)}
    onClick={() => console.log("Button is clicked")}  
  >
    Remove
  </Button>                  
</Box>

Check out the live demo on CodeSandbox

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

Issue with Custom component rendering inside ExpansionPanel

What could be the reason for the code not rendering the clusters as expected? When directly using ExpansionPanelSummary (as indicated in the code comments), the clusters are rendered correctly. function ClusterSummary(props) { return ( <Expansio ...

Proper positioning of popover ensures it does not exceed the boundaries of its parent

In my ngprime table, the header row contains a column field with a popover set to display at the top. However, it is covering the actual field instead of appearing above it. This issue arises because the popover cannot display outside of its parent div, ca ...

What is the best way to distribute stroke width evenly on a rounded hexagon in an SVG?

I created a rounded hexagon with stroke width, but the top and bottom curves appear darker. Does anyone know how to evenly distribute the stroke width along the border? Here is my SVG code: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox ...

AngularJS: Utilizing UI Bootstrap Popover with the Placement Set to 'bottom-right'

I am working with UI Bootstrap and AngularJS, attempting to customize a popover to have the 'bottom-right' placement instead of the default 'bottom' or 'right'. The desired functionality is illustrated in the image below. htt ...

Integrating Google API into your project using React, Redux, and Webpack

Looking to integrate Google Calendar events into my React Redux app has been a bit of a challenge. I've attempted using googleapis and google-auth-library, but encountered errors with webpack due to googleapis being designed for server side use, while ...

Aligning two lines next to a radio button using HTML and CSS

I'm facing a challenge where I want to align two lines in the middle of a radio button. Despite my efforts, I am able to line up the top line but struggling with the bottom one. I prefer not floating the radio button as it's being styled using a ...

What are the steps to create two adaptable blocks and one immovable block?

Check out this HTML code snippet: <div style="border: 1px solid #000; width: 700px; line-height: 38px; display: block"> <div style="margin-left:10px;width: 222px; float: left; margin-right: 10px;"> Enter your question </div& ...

The CSS transition is failing to revert to its original state after being combined with animations

My goal is to create a loading animation using CSS transitions and animations. I have managed to achieve the initial loading effect by scaling with transition and then animating it to scale out on the x-axis. However, when attempting to transition back to ...

Troubleshooting npm Err ERESOLVE peer dependencies in ReactJS for Vercel Hosting deployment

Summary After a month of work, I finally deployed my project by using Git to upload it to GitHub Repository and hosting it on Vercel. However, I encountered an error with npm code ERESOLVE which took me hours to resolve. Background Upon completing my ...

Aligning items vertically within a container with a constant height

I'm currently working on a website that requires a pixel-based navbar with a height of 80px. The issue I'm facing is the difficulty in vertically centering the ul and li elements. I have experimented with various methods such as using top:50%; ...

Define the width and height of images specifically for screens with a maximum device width using @media queries

Having some trouble with the sizing of images on mobile devices. Using the code below, but for some reason, the height remains at 13em on smartphones, despite setting it differently for other devices. Any ideas why this might be happening? @media only sc ...

Is there a way for me to modify this carousel so that it only stops when a user hovers over one of the boxes?

I am currently working to modify some existing code to fit my website concept. One aspect I am struggling with is how to make the 'pause' function activate only when a user hovers over one of the li items, preventing the carousel from looping end ...

Unable to extract property from object in context due to its undefined status

Having trouble with the useContext hook in my React app for managing the cart state. Keep getting an error stating that the function I'm trying to destructure is undefined. I'm new to using the context API and have tried various solutions like e ...

Yii2 Gridview - Horizontal Scroll Bar at the Top of the Page

I found a helpful post on Stack Overflow about creating a Yii2 Gridview with a fixed first column (Yii2 : Gridview with fixed first column), and now I'm looking to add a horizontal scrollbar at the top of the grid. My users really appreciate being ab ...

jQuery's draggable and resizable functionality with containment provisions is designed to

I'm struggling to create a resizable and draggable div using jQuery, but it's proving to be quite buggy in its implementation. Despite finding similar questions, I haven't come across a solution yet. How can I fix the containment bug when ...

apply full width styling to bootstrap select dropdown

<div align="center" class="form-group"> <select v-model="subject" class="form-control"> <option v-for="n in papertypes" class="">{{ n.type }}</option> </select> <br> By default, Bootstrap makes the s ...

Having trouble with installing Recharts through npm

When I try to install recharts using npm, I encounter the following error message in my console: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! ...

I'm facing an issue with running npm start on my react project ever since I installed babel-cli

YTGJAI@DESKTOP-DOAIF41 MINGW64 ~/Desktop/LYNDA MERN/Exercise Files/Ch02/02_01/start/dist $ npm start [email protected] start c:\Users\mctumbaga\Desktop\LYNDA MERN\Exercise Files\Ch02\02_01\start httpster -d ...

Shadow and Quality Issues with SVG Images

I have designed a unique SVG image with intricate details and a decorative frame, enhanced with shadowing effects. Unfortunately, after importing this SVG into a react-native application using the react-native-svg library, I noticed that the shadow around ...

The Page Transcends the Boundaries of the HTML Tag

This particular issue sets itself apart from the common overflow problems that are often faced by people. Interestingly, I have only encountered this problem while using Chrome (Version 41.0.2272.101 64-bit). IE 9+ and Firefox, on the other hand, seem to b ...