I am wondering what is the best way to center the Form.Label components inside my form. I am new to React and Bootstrap.
<Form>
<Styles>
<Form.Group controlId="formBasicEmail">
<Form.Label>Email</Form.Label>
<Form.Control type="email" placeholder="Enter email" />
<Form.Text className="text-muted">
We'll never share your email with anyone else.
</Form.Text>
</Form.Group>
</Form>
I believe that adding "text-center" as your className in your Form.Label component should be enough.
<Form.Label className="text-center">Email</Form.Label>
You might not see the label "really" centered in the screen because of the width it has, but if you set a width, for example, of 100%, it should center in your screen.
For example,
<Form.Label className="text-center" style={{width: "100%"}}>Email</Form.Label>
If yo want to check the final result, it's here: https://codesandbox.io/s/agitated-dubinsky-n3von?fontsize=14
Related
I am trying to use a FloatingLabel component alongside an InpuGroup component of the react-bootstrap package. I am able to get the inputs grouped but the height of the InputGroup.Text is greater than the FloatingLabel input.
Weird CSS when using FloatingLabel with InputGroup components of react-bootstrap
<InputGroup>
<FloatingLabel label="Email Address" className="mb-3">
<Form.Control id="floatingEmail" type="email" name="email" placeholder="email" value={person.email} onChange={updatePersonDetails} />
</FloatingLabel>
<InputGroup.Text>#crestdatasys.com</InputGroup.Text>
</InputGroup>
Is there any known solution or workaround to fix the CSS? Or am I making some mistake with calling the components in wrong order?
I am creating a modal to filter for profiles, on react-bootstrap and redux.
I need to filter to remember it's previous selection every time the user reopen it, even if he returns from another page. It works fine with value based components, such as "range slider" or "text search" because I can grab the previous saved redux store and plug into the component's attribute, such as:
value={rangeValue}
But for radio buttons, I am not sure since the attribute itself, "checked", is its own value.
<Form.Check
inline
label="male"
name="male"
checked <-----------
onChange={(e) => onRadioChange(e)}
/>
I want it to show "checked" only if the user has previously done so. I already have the user choice (whether checked or not) saved in my store, but don't know how to plug it in conditionally.
The returned JSX below
import React, { useState } from "react";
import { Form, Button } from "react-bootstrap";
...
<Form>
<div className="form_content_wrap">
<Form.Group>
<Form.Label htmlFor="formControlRange">Age: {rangeValue}</Form.Label>
<Form.Control
type="range"
className="form-control-range"
id="formControlRange"
min="0"
max="100"
value={rangeValue}
onChange={(e) => setRangeValue(e.currentTarget.value)}
/>
</Form.Group>
<Form.Group>
<Form.Label htmlFor="formControlRange">Gender: </Form.Label>
<Form.Check
inline
label="female"
name="female"
onChange={(e) => onRadioChange(e)}
/>
<Form.Check
inline
label="male"
name="male"
checked <<<------- THIS IS WHERE I WANT TO CHANGE
onChange={(e) => onRadioChange(e)}
/>
</Form.Group>
<Form.Group>
<Form.Label>Keyword</Form.Label>
<Form.Control
type="text"
placeholder="search description"
value={descValue}
onChange={(e) => setDescValue(e.currentTarget.value)}
/>
</Form.Group>
<Button
variant="primary"
type="submit"
onClick={onFormSubmit}
style={{ marginRight: "10px" }}
>
Submit
</Button>
<Button variant="primary" type="submit" onClick={onFormClear}>
Clear
</Button>[enter image description here][1]
</div>
</Form>
Thanks
React appears to be smart enough automatically remove the attribute if you set it equal to a Javascript expression that is not truthy. You should be able to just pull this state from your store. See this question for more details.
<Form.Check checked={true} />
<Form.Check checked={false} />
I'm using reactstrap components.
there is more than one input.
how do I set some fields to "required".
that is, the user cannot pass idle. how can such restrictions be made?
<Row>
<Col xs="2">customer name</Col>
<Col xs="6">
<Input
required
maxLength={"20"}
type={"text"}
placeholder={"customer name"}
name={"customerName"}
defaultValue={this.state.customerName}
onChange={this.handleChange}
/>
</Col>
</Row>
Did you try this one: https://availity.github.io/availity-reactstrap-validation/ ? Does a pretty good job.
Sorry to write here, but it seems at don't have enough reputation to answer.
availity-reactstrap-validation extends the reactstrap forms with some nice functions like validation.
In order to have labels on left and inputs on right you can mix them like this:
<AvForm onValidSubmit={handleValidSubmit} onInvalidSubmit={handleInvalidSubmit}>
<FormGroup row>
<Label for="name" sm={2}>Name</Label>
<Col sm={10}>
<AvField name="name" type="text" required />
</Col>
</FormGroup>
</AvForm>
Be sure that you have imported all the libraries.
Solution: Add "inline" to Form.Group. Codepen: https://codesandbox.io/s/88v6zl66q8
I'm setting up a selection form group in semantic UI in react. However the alignment is off horizontally, so the Radio selection items are floating above an input field (see attached picture).
How do I align them? I would prefer a Semantic-UI way of doing it, and not writing custom CSS (but I'm open to suggestions). Thanks!
https://i.imgur.com/IW1imch.png
When putting the elements in a Grid or Menu container, it doesn't solve the issue.
<Form.Group>
<Form.Field>
<Radio />
<Divider vertical hidden />
</Form.Field>
<Form.Field>
<Radio />
</Form.Field>
<Form.Field>
<Radio />
</Form.Field>
<Form.Field>
<Radio />
</Form.Field>
<Form.Field>
<Radio />
</Form.Field>
<Form.Field>
<Input/>
</Form.Field>
</Form.Group>
I think the easiest way would be to put them in a display: flex container, and set align-items: center on it, as explained here.
Not quite sure, whether I got what you mean. But to prevent the radio buttons floating above the input field, you could arrange them via Semantics grid system:
<Form>
<Grid>
<Grid.Column width={8} stretched verticalAlign="middle">
<Form.Group inline className="no-margin">
<Form.Field><Radio /></Form.Field>
<Form.Field><Radio /></Form.Field>
<Form.Field><Radio /></Form.Field>
<Form.Field><Radio /></Form.Field>
<Form.Field><Radio /></Form.Field>
</Form.Group>
</Grid.Column>
<Grid.Column width={8}>
<Form.Field>
<Input
label="Anden værdi"
name="n"
type='text'
labelPosition='right'
/>
</Form.Field>
</Grid.Column>
</Grid>
</Form>
So, you can achieve a vertical align with verticalAlign="middle".
The problem is, that per default Semantic` fields have a margin. We can overcome this only via adding a class and writing one argument additional css:
.no-margin {
margin: 0 !important;
}
(See codepen: https://codesandbox.io/s/m3y9zpw358)
I am implementing an input form and I am hoping that it could have a fix line limit. For example, for one box, it would be a 3-line input box. If more than 3 lines, there will be ideally a scroll bar on y-axis (i.e., no overflow in x axis). My current code is
<Form>
<FormGroup>
<ControlLabel>
Label
</ControlLabel>
<InputGroup>
<FormControl value='default' onChange={<some function>} />
</InputGroup>
</FormGroup>
</Form>
but it only rendered one line's input.
Edited: using textarea, the font seems to be very tiny.
The following snippet fixes the described issue:
<Form.Group controlId="exampleForm.ControlTextarea1">
<Form.Label>Example textarea</Form.Label>
<Form.Control as="textarea" rows="3" />
</Form.Group>
The componentClass prop of a FormControl is "input" by default, which renders a text input.
A text input is single line.
So try setting the componentClass prop of FormControl to "textarea":
<Form>
<FormGroup>
<ControlLabel>
Label
</ControlLabel>
<InputGroup>
<FormControl componentClass="textarea" value='default' onChange={<some function>} />
</InputGroup>
</FormGroup>
</Form>