Stacking elements in perfect alignment

Seeking assistance with React/MUI as a newcomer.

I am utilizing a Stack of TextFields, which are resizing effectively based on screen width.

<Stack
        direction="row"
        sx={{
          margin: "16px"
        }}
      >
        <Stack sx={{ flexGrow: 1 }}>
          <Box sx={{ flexWrap: "wrap" }}>
            <TextField sx={{ width: "180px" }} />
            <TextField sx={{ width: "180px" }} />
            <TextField sx={{ width: "180px" }} />
            <TextField sx={{ width: "180px" }} />
            <TextField sx={{ width: "180px" }} />
            <TextField sx={{ width: "180px" }} />
            <TextField sx={{ width: "180px" }} />
            <TextField sx={{ width: "180px" }} />
            <TextField sx={{ width: "180px" }} />
            <TextField sx={{ width: "180px" }} />
            <TextField sx={{ width: "180px" }} />
            <TextField sx={{ width: "180px" }} />
          </Box>
        </Stack>
      </Stack>

In need of guidance to place an action button:

  • Constantly aligned to the right side of the screen
  • Always positioned on the same row as at least one TextField (never in a separate row)
  • Does not occupy all vertical space (allowing for TextFields above and to its left)

My attempts include wrapping it in a combination of flex-inline, block-inline Box, but I am unable to meet all requirements consistently.

Your help is greatly appreciated!

cssreactjsmaterial-ui

Answer №1

Someone originally provided the correct answer but unfortunately deleted it, so I am reposting it here:

<Stack
  sx={{
    flexDirection: "row",
    minWidth: "360px",
  }}
  <Box sx={{ display: "flex", flexWrap: "wrap" }}>
   <TextField sx={{ width: "180px" }} />
   <TextField sx={{ width: "180px" }} />
   <TextField sx={{ width: "180px" }} />
   <TextField sx={{ width: "180px" }} />
   <TextField sx={{ width: "180px" }} />
   <TextField sx={{ width: "180px" }} />
   <TextField sx={{ width: "180px" }} />
   <TextField sx={{ width: "180px" }} />
   <TextField sx={{ width: "180px" }} />
   <TextField sx={{ width: "180px" }} />
   <TextField sx={{ width: "180px" }} />
   <TextField sx={{ width: "180px" }} />
   <Box
            sx={{
              flexGrow: 1,
              display: "flex",
              justifyContent: "flex-end",
              flexShrink: 0,
            }}
          />
    </Box>

</Stack>

Answer №2

The Stack component comes with a default flexDirection set to column, but you can easily change it to row.

If you need to align items to the right within the Stack, you can use justifyContent: "end".

To display only 2 items per row, you can specify a minWidth: "360px", which is twice the width of the TextField.

<Stack
  sx={{
    flexWrap: "wrap",
    flexDirection: "row",
    justifyContent: "end",
    minWidth: "360px",
  }}
>
  <TextField sx={{ width: "180px" }} />
  <TextField sx={{ width: "180px" }} />
  <TextField sx={{ width: "180px" }} />
  <TextField sx={{ width: "180px" }} />
  <TextField sx={{ width: "180px" }} />
  <TextField sx={{ width: "180px" }} />
  <TextField sx={{ width: "180px" }} />
  <TextField sx={{ width: "180px" }} />
  <TextField sx={{ width: "180px" }} />
  <TextField sx={{ width: "180px" }} />
  <TextField sx={{ width: "180px" }} />
</Stack>

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 data not refreshing when using router push in NextJS version 13

I have implemented a delete user button on my user page (route: /users/[username]) which triggers the delete user API's route. After making this call, I use router.push('/users') to navigate back to the users list page. However, I notice tha ...

reactjstypescriptnext.js

React: executing function before fetch completes

Whenever I trigger the ShowUserPanel() function, it also calls the getUsers function to retrieve the necessary data for populating the table in the var rows. However, when the ShowUserPanel function is initially called, the table appears empty without an ...

javascriptreactjsmaterial-uifetch

Creating an animated Gif using HTML and CSS styling

I am trying to create an effect where a .gif animation plays once when the mouse hovers over a specific image. I have one static image in PNG format and one animated gif. The goal is for the gif to play every time the mouse is hovered over the png image. ...

htmlcssanimation

Effortlessly lower several elements simultaneously with SlideDown

My form div contains multiple inner divs: <div class="form" style="display:none"> For example: <div class="row"> <?php echo $form->labelEx($model,'comment'); ?> <?php echo $form->textField($model,'commen ...

jqueryhtmlcss

Creating beautiful prints with images

I have been tasked with developing an MVC C# application where the contents of a div are dynamically created using an AJAX call to fetch data from a database. Upon successful retrieval, the content is then displayed as a success message in JavaScript. Here ...

javascripthtmlcssajax

display the chosen choices from the jquery tool

I have implemented a Jquery movie seat selection plugin on my jsp website successfully. It allows users to select seats with ease. However, the issue I am facing is that due to my limited knowledge of Jquery, I am unable to display the selected seats by t ...

javascriptjquerycssjspplugins

Is there a clash between the jQuery slider moving up and down and the Twitter widget

Check out this jsFiddle code that functions well until a Twitter widget is inserted. The code is designed to slide content up and down when the link "click here" is clicked. However, once a default code from get a Twitter widget is added in this version ( ...

jqueryhtmlcsstwitterwidget

Is the Three.js and React-three-fiber model appearing pitch black?

This particular model appears completely black when loaded, unlike others. Link to the problematic model Does anyone have any insights into why this might be happening? All other GLB files load correctly with textures, but this particular one is causing ...

reactjsthree.js3dgltfreact-three-fiber

Is there a way to create a multi-page website simulation using jQuery?

My current project involves creating a single page website, but I am looking to give the illusion of a multi-page site by using CSS/jQuery to hide and reveal different sections when specific links in the navigation menu are clicked. Here is the code snipp ...

javascriptjqueryhtmlcss

Tips for using React Router to prevent unnecessary re-rendering of the entire application

Currently, I have set up an App Component to manage all the routes in the following manner: class App extends React.Component { state = { signedIn: false }; handleSignedIn = () => { this.setState({ signedIn: true }); }; render() { <R ...

reactjsreact-router

React Router - Dynamically Displaying 404 Errors Within Components

Setting up routes: <Route path="/" component={App}> <IndexRoute component={Home}/> <Route path="/:subject" component={SubjectPage}/> <Route path="*" component={NotFound} /> </Route> Any subject parameter will be direct ...

reactjsreact-reduxreact-routerreact-router-v4react-router-dom

Tips for customizing the main select all checkbox in Material-UI React data grid

Utilizing a data grid with multiple selection in Material UI React, I have styled the headings with a dark background color and light text color. To maintain consistency, I also want to apply the same styling to the select all checkbox at the top. Althou ...

javascriptreactjstypescriptmaterial-uidatagrid

What is the best way to bind the value of total when working with forms and the bind method?

I am working on a form where I need to pass the value of total. Regarding the total: I have successfully passed the value of the cart, which is an array. const [total, setTotal] = useState<number | undefined>(undefined); const calculateTotal = () ...

javascriptreactjstypescriptformsnext.js

dispatch a WebSocket message within a route using Express.js

The Objective: Imagine a bustling marketplace with multiple shops. I'm working on a dedicated page localhost:3000/livePurchases/:storeId for shop owners to receive real-time notifications whenever they make a new sale. https://i.stack.imgur.com/VdNz ...

javascriptnode.jsreactjsexpresswebsocket

What could be causing my navbar to not be responsive on mobile devices?

I'm in need of assistance. When viewing my website in mobile mode, the collapse hamburger menu is hiding too far to the right. This issue is making the site look unresponsive, and I've been unable to find a solution. It seems like the problem sta ...

htmlcssgridbootstrap-5

What is the best way to enable an image to be moved on top of another image?

Is there a way to allow users to drag around an image that is positioned on top of another image in an HTML file? I want the superimposed image to stay within the boundaries of the underlying image. Any suggestions on how this can be achieved? <html& ...

javascriptjqueryhtmlcss

Tips for repositioning form fields using HTML, CSS, and Flask-WTF

I am currently developing my first web application. I require a basic form for users to input a few values. Although I have successfully implemented it, I would prefer the data entry fields to be arranged in a row instead of a column. The snippets below s ...

htmlcsstwitter-bootstrap

Creating an HTML table with colspan and rowspan using ng-repeat from a deeply nested JSON dataset

I'm working on creating a table layout shown in the attached image: Composite Class Routine Check out my progress so far in this Plunker demo: https://plnkr.co/edit/4WiWKDIM2bNfnmRjFo91?p=preview The JSON data I'm using is as follows: $scope. ...

htmlcssangularjsjsonangularjs-ng-repeat

detecting syntax errors in CSS with @media queries and keyframes

/*general CSS setting for all device types above hd*/ * { margin: 0; padding: 0; } #watchonly { display: none; } ...

csshtml

`Is it possible to modify the background color of InputAdornment in Material-UI TextField?`

For the first 10% of the text field, one background color is used, while for the remaining 90%, another background color is applied. <TextField className={classes.root} type="text" placeholder="username" var ...

cssreactjsmaterial-uitextfield