Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ReactJS align material-ui elements horizontally

I am trying to have a radio button next to a text input so essentially a user can input "answers" to a question and mark one preferred. However, Material-UI puts each on it's own line.

This is what I currently have :

<div>
   <RadioButton
      value="light"
   />
   <TextInput
       hintText="Answer"
       multiLine = {true}
   />
</div>
like image 604
erichardson30 Avatar asked Mar 14 '16 18:03

erichardson30


People also ask

How do you align items horizontally in MUI?

Material-UI Grid Align Right If you need to horizontally align using only CSS, remember that justify-content horizontally aligns using the following values: flex-start: horizontally aligns left. center: horizontally aligns center. flex-end: horizontally aligns right.

How do you align in react?

When working on a page, we have to align text towards, right, left, or center. It is very easy to align text in React using textAlign property inside style in index. tsx file. Another way to center the text for multiple elements is by adding the css code in the style.

What is MUI stack?

The Stack component manages layout of immediate children along the vertical or horizontal axis with optional spacing and/or dividers between each child.


1 Answers

Just for the record, I managed to align radio buttons using flexboxgrid... Did something like this:

      <div className="row">
        <div className="col-md-2">
          Type:
        </div>
        <div className="col-md-10">
          <RadioButtonGroup
             className="row"
             name="type">
            <RadioButton
               className="col-md-4"
               value="other"
               label="Other" />
            <RadioButton
               className="col-md-4"
               value="custom"
               label="Custom" />
          </RadioButtonGroup>
        </div>
      </div>
like image 151
roboli Avatar answered Nov 06 '22 00:11

roboli