Using React Bootstrap, how can i align the elements of forms within the same row?

Question

So, ya see how the titles and text boxes and buttons are all kind of offset from each other and really messy looking? How can i make it so they line up together? I'd especially like for the buttons to kind of "anchor" themselves to the bottom of this component, if that makes sense.

I have tried a few things already. I found a thread that was talking about Cards and Card Decks and how to align all the buttons of a Card to each other, however, none of the styling options that they suggested worked with my current situation.

Code wise, here is the component all this is housed within

import { Button, Row, Col, Container, Form } from "react-bootstrap"
import styles from "../styles/ParameterList.module.scss"
import {useState} from 'react'

const ParameterList = ({onRandomList, onNewList, onClear, onDupesCheck, dupesChecked}) => {
    
    const [newListState, setNewListState] = useState('')
    const [minNumberState, setMinNumberState] = useState('')
    const [maxNumberState, setMaxNumberState] = useState('')
    
    return (
        <div className={styles.container} id="paramsDiv">
            <Container fluid >
                <Row>
                    <Col align="center">
                        <Form>
                            <Form.Label>Generate an entirely new list of instruments</Form.Label>
                            <Form.Control className={styles.formControlOverride} type="number" placeholder="Minimum" min="0" value={minNumberState} onChange={(e) => setMinNumberState(e.target.value)}/>
                            <Form.Control className={styles.formControlOverride} type="number" placeholder="Maximum" min="0" value={maxNumberState} onChange={(e) => setMaxNumberState(e.target.value)}/>
                            <Button className='align-self-end' type="button" onClick={() => {onRandomList(minNumberState, maxNumberState); setMaxNumberState(''); setMinNumberState('')}}>Generate Random List</Button>
                        </Form>
                    </Col>
                    <Col align="center">
                        <Form>
                            <Form.Label>Add a random group of new instruments</Form.Label>
                            <Form.Control className={styles.formControlOverride} type="number" placeholder="Amount of Instruments" min="0" value={newListState} onChange={(e) => setNewListState(e.target.value)}/>
                            <Button className='align-self-end' type="button" onClick={() => {onNewList(newListState); setNewListState('')}}>Generate Random Instrument(s)</Button>
                        </Form>
                    </Col>

                    <Col align="center">
                        <Form>
                            <Form.Label>Choose an instrument to add to the list</Form.Label>
                            <Button>Select Instrument</Button>
                        </Form>
                    </Col>
                </Row>
            </Container>
        </div>
    )
}


export default ParameterList

And here is the scss that goes with it

.container {
    background-color: #fff;
    padding: 1.5rem;
    margin: 1rem 10rem;
    align-items: center;
    border-radius: .5rem;
}

.formControlOverride {
    margin: .5rem
}

.formCheckOverride {
    margin-bottom: .5rem;
}

Thanks for any help in advance!

isherwood · Accepted Answer · 2021-08-03 16:15:31Z

3

I've used a few different approaches for this:

Put the labels in a separate row, so that the inputs are on the same level in the next row. This gets weird if you go full-width for mobile, though.
Set a min-height on the labels that's appropriate for your situation using a style class. Fixed heights are never ideal, of course, as they waste space in some cases.
Set overflow to ellipsis for labels so they don't wrap, then put titles (hover tooltips) on them with the full text. The viability of this depends on your end user scenario.
Simply restructure to give each label/input pair more width. This is probably my most common solution.
Rethink your label text. Is "entirely" redundant with "new"? Survey says yes. Here's my bible for writing well.

edited Aug 3, 2021 at 16:15

answered Aug 3, 2021 at 16:09

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

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

Comments

isherwood · Accepted Answer · 2021-08-03 16:59:07Z

1

You can set the set form as flex column, given the columns are of the same height. If the below one doesn't work then you need to check the columns and apply stretch to the row.

form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

edited Aug 3, 2021 at 16:59

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

answered Aug 3, 2021 at 16:22

Maria Nirmal

4032 silver badges8 bronze badges

1 Comment

isherwood Over a year ago

I think you're onto something here, but you might work up a functional snippet to demonstrate. You can load Bootstrap via CDN.

Collectives™ on Stack Overflow

Using React Bootstrap, how can i align the elements of forms within the same row?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related