CODEWITHSUNDEEP
cssreactjsbootstrap-4react-bootstrap
Robby Hoover
Robby Hoover

Reputation: 67

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

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.

enter image description here

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!

Upvotes: 1

Views: 6374

Answers (2)

Maria Nirmal
Maria Nirmal

Reputation: 383

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%;
}

Upvotes: 1

isherwood
isherwood

Reputation: 61063

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.

Upvotes: 3

Related Questions