I am creating a form in the front end In that I use texInput, radio button, Select component. All the texInput, radio button component are in one size as per alloted but the select component size is very small please help me to solve the select component in the same size as per textinput component
put your form in a container and override the css of the select component :
css----------------
.yourClassName{
width: 100%!important;
}
html-----------------------
<Container>
<Col md={{ span: 6, offset: 3 }}>
<Form onSubmit={this.onSubmitForm}>
<Form.Row>
<Col md={{ span: 3 }}>
<Form.Group as={Row} controlId="Email">
<Form.Label>Email Address</Form.Label>
<Form.Control type="email" placeholder="Enter Email" name="Email"
value={this.state.Email} onChange={this.handleChange} />
</Form.Group>
</Col>
<Col md={{ span: 3}}>
<Form.Group as={Row} controlId="Name">
<Form.Label>Name</Form.Label>
<Form.Control type="text" placeholder="Enter Name" name="Name"
value={this.state.Name} onChange={this.handleChange} />
</Form.Group>
</Col>
</Form.Row>
<Form>
</Col>
</Container>
Related
<Form>
<Row>
<Col></Col>
<Col>
<h4>Demo Login</h4>
<Form.Group controlId="formGroupEmail">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="Enter email" />
</Form.Group>
<Form.Group controlId="formGroupPassword">
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="Password" />
</Form.Group>
<Button variant="primary" type="submit">
Login In
</Button>
</Col>
<Col></Col>
</Row>
</Form>
How can I center this row on the screen?. The current items or columns are centered but I can't seem to find a way to center the row itself. I tried adding an inline style of 'align-items: enter' but that doesn't seem to work. Not even sure if I centered the columns correctly as well.
Try adding: className="align-items-end" to the row component and see if that works.
I want to centerize my form verticaly and horizantaly use react-bootstrap.
React code:
<Container>
<Row >
<Col md={{ span: 4, offset: 4 }}>
<Form onSubmit={(e) => loginHandler(e)}>
<Form.Group controlId='formGroupEmail'>
<Form.Label>Kullanıcı Adı veya Email Adresi</Form.Label>
<Form.Control type='email' placeholder='Enter email' />
</Form.Group>
<Form.Group controlId='formGroupPassword'>
<Form.Label>Şifre</Form.Label>
<Form.Control type='password' placeholder='Password' />
</Form.Group>
<Button type='submit'>Giriş Yap</Button>
</Form>
</Col>
</Row>
</Container>
I centerize horizontally using md={{ span: 4, offset: 4 }} in my Col conponent but I cant verticaly centerized.
If you use React Css, you can try "align-middle" class in your Row component.
I am using reacts form.control, I want to reduce the size of the placeholder content :
<Form>
<Form.Group controlId="formBasicEmail">
<Form.Label>Email address</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.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">
Submit
</Button>
</Form>
I tried few approaches by placing fontsize attribute in style, yet its not workin.
Can anyone suggest me any solution/link for further analysis
You should use the ::placeholder CSS pseudo-element like the following:
.input::placeholder {
font-size: 13px;
}
I am trying react-hook-forms. Is there anyway to not reset the form when submitting? Everytime I click submit form is reset.
import React from "react";
import { useForm } from "react-hook-form";
import {
Row,
Col,
Card,
CardHeader,
CardBody,
Form,
FormGroup,
Label,
Input,
Button
} from "reactstrap";
const Insights = props => {
const { register, handleSubmit, watch } = useForm();
const GetSearchForm = () => {
const timePickerStyle = { width: 96, important: "true" };
const onSearch = data => {
console.log(data);
};
return (
<Form onSubmit={handleSubmit(onSearch)}>
<Row>
<Col>
<FormGroup>
<Label for="exampleEmail">Account Id</Label>
<Input
type="number"
name="account"
id="account"
placeholder="AccountId"
innerRef={register}
/>
</FormGroup>
</Col>
<Col>
<FormGroup>
<Label for="examplePassword">Email</Label>
<Input
type="email"
name="email"
id="email"
placeholder="Email"
innerRef={register}
/>
</FormGroup>
</Col>
<Col>
<FormGroup>
<Label for="exampleEmail">xPage Id</Label>
<Input
type="number"
name="xpageid"
id="xpage"
placeholder="xPage Id"
innerRef={register}
/>
</FormGroup>
</Col>
<Col>
<FormGroup>
<Label for="examplePassword">Content Devider Id</Label>
<Input
type="number"
name="contentdevider"
id="contentdeviderid"
placeholder="Content Devider Id"
innerRef={register}
/>
</FormGroup>
</Col>
<Col>
<FormGroup>
<Label for="examplePassword">Custom Page Id</Label>
<Input
type="number"
name="custompage"
id="custompageid"
placeholder="Custom Page Id"
innerRef={register}
/>
</FormGroup>
</Col>
<Col>
<FormGroup>
<Label for="examplePassword">Service</Label>
<Input
type="text"
name="servicename"
id="servicename"
placeholder="Custom Page Id"
innerRef={register}
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col xs="4">
<FormGroup>
<Label for="exampleDate">Date</Label>
<Row>
<Col xs="8">
<Input
type="date"
name="date"
id="exampleDate"
placeholder="date placeholder"
innerRef={register}
/>
</Col>
<Col xs="3">
<Input
style={timePickerStyle}
type="time"
name="time"
id="exampleTime"
placeholder="time placeholder"
innerRef={register}
/>
</Col>
</Row>
</FormGroup>
</Col>
<Col xs="4">
<FormGroup>
<Label for="exampleDate">Date</Label>
<Row>
<Col xs="8">
<Input
type="date"
name="date"
id="exampleDate"
placeholder="date placeholder"
innerRef={register}
/>
</Col>
<Col xs="3">
<Input
style={timePickerStyle}
type="time"
name="time"
id="exampleTime"
placeholder="time placeholder"
innerRef={register}
/>
</Col>
</Row>
</FormGroup>
</Col>
</Row>
<Button>Submit</Button>
</Form>
);
};
return (
<Row>
<Col xs="12" lg="12">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i> Insights
</CardHeader>
<CardBody>
<GetSearchForm></GetSearchForm>
</CardBody>
</Card>
</Col>
</Row>
);
};
export default Insights;
Because GetSearchForm is its own component, it gets created every time Insights is being rerendered.
You call the register function with the innerRef, but since the Input changed, and it is not the same component (newly created), its getting newly registered, which resets the state.
You either can move the useForm to the GetSearchForm and pass the data back up on submit or inline the whole form in Insights.
I am using react-bootstrap to create a form. The title, datePicker, and dropdown do appear how I want them to, on the same row with space in between them, but when I try to insert a text-area underneath those fields, it renders next to the dropdown menu instead. What is the problem?
<Form>
<Form.Row>
<Form.Group as={Col}>
<Form.Control name="title"
type="title"
placeholder="Enter title"
value={this.state.title}
onChange={e => this.change(e)}
/>
</Form.Group>
<Form.Group as={Col}>
<DatePicker
selected={this.state.startDate}
onChange={e => this.change(e)}
/>
</Form.Group>
<Form.Group as={Col}>
<select className="custom-select" name="course" value={this.state.course} onChange={e => this.change(e)}>
<option value="Math234">Math234</option>
<option value="Art">Art</option>
</select>
</Form.Group>
</Form.Row>
<Form.Group>
<Form.Label>Enter notes</Form.Label>
<Form.Control
name = "notes"
as="textarea"
rows="3"
value={this.state.notes}
onChange={e => this.change(e)}
/>
</Form.Group>
</Form>
You have to define each Col's size. The bootstrap cols are rendering side by side if you do not tell them the axact size for each breakpoint, or at least one. In this case, your Form.Group will get the col and all the other column related classnames.
Try out something like this:
<Form.Row>
<Form.Group as={Col} sm={12}>
{/* your form control goes here */}
</Form.Group>
</Form.Row>
The xs, sm, md and lg breakpoint props are all available in this case, use them as you wish.