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>
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.
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.
The Stack component manages layout of immediate children along the vertical or horizontal axis with optional spacing and/or dividers between each child.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With