I have a login form using the Container component from Bootstrap. How do I vertically align the entire container in the center of the screen?
function Auth() {
return (
<Container >
<Row className="justify-content-center">
<Col sm={6}>
<Card >
<Card.Body>
<Form>
<Form.Group controlId="formBasicEmail">
<Form.Label>Username</Form.Label>
<Form.Control type="text" placeholder="Username" />
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="Password" />
</Form.Group>
<Form.Group controlId="formBasicCheckbox">
<Form.Check type="checkbox" label="Check me out" />
</Form.Group>
<Button variant="primary" type="submit">
Login
</Button>
</Form>
</Card.Body>
</Card>
</Col>
</Row>
</Container>
);
}
Related
I have a weird issue where I can't center a Row vertically in my screen.
The Card I have is perfectally centered horizontally but not vertically. How can I do that ?
I used the Row component which has align='middle' to align vertically but it isn't working
Here is my implementation:
<Row align='middle' justify='center'>
<Col span={18}>
<Card>
{/* <img className='login-logo' src={logo} alt='logo' /> */}
<Text size='30px' type='BOLD'>
QIFF DASHBOARD
</Text>
<Form name='login' onFinish={formik.handleSubmit}>
<Form.Item>
<Input
id='email'
name='email'
label='Email'
placeholder='Email'
type='email'
autoComplete='new-email'
onBlur={formik.handleBlur}
onChange={formik.handleChange}
value={formik.values.email}
/>
{formik.errors.email ? <Text>{formik.errors.email}</Text> : null}
</Form.Item>
<Form.Item>
<Input
id='password'
name='password'
placeholder='Password'
type='password'
autoComplete='new-password'
onBlur={formik.handleBlur}
onChange={formik.handleChange}
value={formik.values.password}
/>
{formik.errors.password ? <Text>{formik.errors.password}</Text> : null}
</Form.Item>
<div className='submit-button'>
<Button
htmlType='submit'
onClick={formik.handleSubmit}
style={{ width: '100%', backgroundColor: '#f85940', color: 'white' }}
>
Sign in
</Button>
</div>
</Form>
</Card>
</Col>
</Row>
<Row align='middle' justify='center'></Row>
Presumably, the Row tag does not set the attribute display:flex
So justify='center' is invalid
The following solutions can be used：
1、Child element (Need to be centered vertically)
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
2、 <Row style="display:flex"></Row>
<Card className="input">
<form onSubmit={addUserHandler} className="input">
<label htmlFor="username">Username</label>
<input id="username" type="text" />
<label htmlFor="age">Age (Years)</label>
<input id="age" type="text" />
<button type="submit">Add User</button>
</form>
</Card>
Now the Card component below.
return <div className="card">{props.children}</div>;
How to align this two for css styling?
css
.card > .input-form {
background-color: gray
}
code as below
<Card className="input">
<form onSubmit={addUserHandler} className="input-form">
<label htmlFor="username">Username</label>
<input id="username" type="text" />
<label htmlFor="age">Age (Years)</label>
<input id="age" type="text" />
<button type="submit">Add User</button>
</form>
</Card>
Now the Card component below.
return <div className="card">{props.children}</div>;
I'm using reactstrap in my project I have a simple card and I want to place a text area inside it using the following code:
<Card>
<CardBody>
<Form>
<FormGroup>
<Input
type="textarea"
defaultValue="Hello world"
/>
</FormGroup>
</Form>
</CardBody>
</Card>
If I then try to set the height it just doesn't work. I have tried using style:
<Card>
<CardBody>
<Form>
<FormGroup>
<Input
type="textarea"
defaultValue={tweet.full_text}
style={{ height: 220 }}
/>
</FormGroup>
</Form>
</CardBody>
</Card>
And also tried using a custom css class:
.text-area-custom {
height: 220px;
}
<Card>
<CardBody>
<Form>
<FormGroup>
<Input
className="text-area-custom"
type="textarea"
defaultValue={tweet.full_text}
/>
</FormGroup>
</Form>
</CardBody>
</Card>
Neither of these methods work. Any idea what I am doing wrong here?
Try and set the rows attribute
<Card>
<CardBody>
<Form>
<FormGroup>
<Input
type="textarea"
defaultValue={tweet.full_text}
rows="5"
/>
</FormGroup>
</Form>
</CardBody>
</Card>
<FormControl fullWidth component="fieldset" inputRef={register({ required: true })}>
<FormLabel component="legend">Format</FormLabel>
<RadioGroup row aria-label="format" name="format" onChange={changeHandler} inputRef={register({ required: true })}>
<FormControlLabel value="radio" control={<Radio inputRef={register({ required: true })} />} label="Radio" />
<FormControlLabel value="podcast" control={<Radio inputRef={register({ required: true })} />} label="Podcast" />
<FormControlLabel value="both" control={<Radio inputRef={register({ required: true })} />} label="Both" />
</RadioGroup>
</FormControl>
So that is my FormControl,
However what is happening is the FormControlLabel are all going to the left (see pic)
What I want it to do is be evenly spaced out from left to right of the screen.
In your CSS file, try
display: flex;
justify-content: space-between;
.container {
display: flex;
justify-content: space-between;
}
<div class="container">
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
<label class="form-check-label" for="exampleRadios1">
Default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
Second default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
<label class="form-check-label" for="exampleRadios3">
Disabled radio
</label>
</div>
</div>
More info about flexbox: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
Does anyone have this bug where an input group addon or dropdown is taking up half of the entire width instead of a 100%. (basically the InputGroupButton is taking up the other 50% so 100% width spread automatically between two elements but in the Reactstrp docs there's every indication that this is goes against expected behavior)
I want my input group to be 100% width like the rest.
https://reactstrap.github.io/components/input-group/
this is what I currently have :
and if I open Inspect Element :
you can see that the InputGroupButton isn't setting a padding or a margin like "auto" or something similar which you'd expect to be responsible for this.
here's the small snipet of react render concerning the password field :
render() {
return (
<Label className="password">
<InputGroup>
<Input
className="password__input"
placeholder="Mot de Passe"
type={this.state.type}
onChange={this.passwordStrength}
/>
<InputGroupButton><Button onClick={this.showHide}>
{this.state.type === 'password' ?
<i className="fa fa-eye" aria-hidden="true" />
:
<i className="fa fa-eye-slash" aria-hidden="true" />
}</Button></InputGroupButton>
</InputGroup>
<span
className="password__strength"
data-score={this.state.score}
/>
</Label>
);
}
and here's the render that calls it (it's called at "ShowPassword") :
render() {
return (
<div>
<Button color="info" onClick={this.toggle}>{this.props.buttonLabel}</Button>
<Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
<ModalHeader toggle={this.toggle}>Créer un compte</ModalHeader>
<ModalBody>
Veuillez renseigner les champs ci-dessous afin de créer votre compte
<InputGroup>
<Input placeholder="Nom d'utilisateur" />
</InputGroup>
<InputGroup>
<Input placeholder="E-mail" />
</InputGroup>
<InputGroup>
<ShowPassword />
</InputGroup>
<InputGroup>
<Input placeholder="Confirmer"/>
</InputGroup>
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={this.toggle}>Envoyer</Button>{' '}
<Button color="secondary" onClick={this.toggle}>Annuler</Button>
</ModalFooter>
</Modal>
</div>
);
}
This is not a bug. You are using reactstrap an unintended manner. reactstrap is based on Bootstrap CSS Library. Bootstrap expects you to structure your elements and CSS classes in a certain way it describes in the documentation. If we don't follow them, we can't get the expected result.
As an example, Bootstrap only expects certain elements like Input, InputGroupButton and InputGroupAddon inside the InputGroup. But in your case, if we replace ShowPassword with its actual JSX structure, you will have a Label inside InputGroup and another InputGroup inside the Label. What is why it is not rendered as expected.
First, to wrap your ShowPassword, you should use a div instead of a Label.
render() {
return (
<div className="password">
<InputGroup>
<Input
className="password__input"
placeholder="Mot de Passe"
type={this.state.type}
onChange={this.passwordStrength}
/>
<InputGroupButton>
<Button onClick={this.showHide}>
{this.state.type === "password"
? <i className="fa fa-eye" aria-hidden="true" />
: <i className="fa fa-eye-slash" aria-hidden="true" />}
</Button>
</InputGroupButton>
</InputGroup>
<span className="password__strength" data-score={this.state.score} />
</div>
);
}
and then you should remove additional InputGroup which wrap your ShowPassword component.
render() {
return (
<div>
<Button color="info" onClick={this.toggle}>
{this.props.buttonLabel}
</Button>
<Modal
isOpen={this.state.modal}
toggle={this.toggle}
className={this.props.className}
>
<ModalHeader toggle={this.toggle}>Créer un compte</ModalHeader>
<ModalBody>
Veuillez renseigner les champs ci-dessous afin de créer votre compte
<InputGroup>
<Input placeholder="Nom d'utilisateur" />
</InputGroup>
<InputGroup>
<Input placeholder="E-mail" />
</InputGroup>
<ShowPassword />
<InputGroup>
<Input placeholder="Confirmer" />
</InputGroup>
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={this.toggle}>
Envoyer
</Button>{" "}
<Button color="secondary" onClick={this.toggle}>
Annuler
</Button>
</ModalFooter>
</Modal>
</div>
);
}
Hopefully, now you will get the expected the result.