React material-ui and reactstrap form inline with button new line

Question

How can I have the form elements inline, but the submit button in a new line?

import {
    Button,
    Form,
    Label,
    Input,
    Card,
    CardText,
    CardBody,
    CardTitle,
    Col, Badge
} from 'reactstrap';
import { 
    FormControlLabel, Checkbox, FormGroup
} from '@material-ui/core';

...

<Form inline>
    <FormGroup className="mr-10 mb-10">
        <Label for="initLateFee" className="mr-sm-10">Initial Late Fee</Label>
        <Input type="number" name="initLateFee" id="initLateFee" placeholder="0.00" />
    </FormGroup>
    <FormGroup className="mr-10 mb-10">
        <Label for="dailyLateFee" className="mr-sm-10">Daily Late Fee</Label>
        <Input type="number" name="dailyLateFee" id="dailyLateFee" placeholder="0.00" />
    </FormGroup>
    <FormGroup className="mr-10 mb-10">
        <Label for="applyOn" className="mr-sm-10">Apply On Day</Label>
        <Input type="number" name="applyOn" id="applyOn" placeholder="0" />
    </FormGroup>
    <FormGroup className="mr-10 mb-10">
        <Label for="maxLateFee" className="mr-sm-10">Max Late Fee</Label>
        <Input type="number" name="maxLateFee" id="maxLateFee" placeholder="0.00" />
    </FormGroup>
    <div className="row">
        <Button type="submit" color="primary">Update</Button>
    </div>
</Form>

I would like to have the "submit" button in a new line, but belonging to the <Form>

superhawk610 · Accepted Answer · 2021-03-24 20:06:20Z

3

If you want multiple inputs on a single horizontal row, use the grid system.

<Form>
  <div className="row">
    <div className="col">
      <FormGroup>
        <Label>First Name</Label>
        <Input name="firstName" />
      </FormGroup>
    </div>
    <div className="col">
      <FormGroup>
        <Label>Last Name</Label>
        <Input name="lastName" />
      </FormGroup>
    </div>
  </div>
  <Button type="submit">
    Submit
  </Button>
</Form>

edited Mar 24, 2021 at 20:06

answered Mar 24, 2021 at 19:01

superhawk610

2,7152 gold badges20 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

myTest532 myTest532 Over a year ago

It did not work. Each input was in one line. The form is wrapped with <div className="col-sm-12 col-md-12 col-xl-12">

superhawk610 Over a year ago

You can try wrapping your form group in a <div className="row">, then wrapping each individual input with <div className="col">. That should display them all in a single row, with auto-sized columns. You'll still want the <FormGroup inline> so checkbox labels are displayed inline.

myTest532 myTest532 Over a year ago

I would like to have the labels on top of the inputs, so the labels are not inline

superhawk610 Over a year ago

Ahh, gotcha. Updated my answer.

Collectives™ on Stack Overflow

React material-ui and reactstrap form inline with button new line

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related