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.
Related
Suddenly, I am getting this error while running my app.
I have imported FloatingLabel from react-bootstrap only which is correct as far as I know.
My code is
import React from 'react';
import { Form, Button, Row, Col, Container, FloatingLabel} from 'react-bootstrap';
import './login.css';
class LoginForm extends React.Component
{
FormExample()
{
return (
<Container fluid="sm">
<Row lg={12}>
<Col lg={6} className="m-auto border border-2 border-dark box-shadow">
<Container className="text-center mt-2">
<h2 className="text-center">Login</h2>
<p>Sign into your account here</p>
</Container>
<Form noValidate aria-label="Login">
<Row md={12} className="mb-3">
<Form.Group as={Col} md={10} className="m-auto" controlId="formGroupPassword">
<FloatingLabel label="Password" controlId="password">
<Form.Control type="password" placeholder="Password" required/>
</FloatingLabel>
</Form.Group>
</Row>
<Row md={12} className="mb-3" >
<Form.Group as={Col} md={10} className="m-auto">
<Form.Check required name="terms" label="Agree to terms and conditions" id="terms"/>
</Form.Group>
</Row>
</Form>
</Col>
</Row>
</Container>
);
}
render()
{
return(this.FormExample());
}
}
export default LoginForm;
Can somebody help me understand why I am getting this error even if I have imported the proper module?
https://react-bootstrap.netlify.app/components/forms/#floating-label-props
Try this^.
import FloatingLabel from 'react-bootstrap/FloatingLabel'
<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 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 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>
I am using create-react-app or my project. I created a form field where I store the data into the state. I would like to send the data as an email, and I'm lost on how to do so.
One of the problems is using create-react-app, I'm not sure where to find my router or server page in node.
Any help would be greatly appreciated.
import React, { Component } from 'react';
import { Button, Col, Grid, Row, Form, FormGroup, FormControl,
ControlLabel, Checkbox } from 'react-bootstrap';
export class Contact extends Component {
constructor(props) {
super(props);
this.state = {
name: "",
email: "",
message: ""
}
}
onChange = (e) => {
const state = this.state;
state[e.target.name] = e.target.value;
this.setState(state);
}
onSubmit = (e) => {
e.preventDefault();
const { name, email, message } = this.state;
}
render() {
const { name, email, message } = this.state;
return(
<div>
<Grid>
<Row id="contactForm">
<Col xs={2}>
</Col>
<Col xs={8}>
<Form horizontal onSubmit={this.onSubmit}>
<FormGroup >
<Col componentClass={ControlLabel} sm={2}>
Name
</Col>
<Col sm={10}>
<FormControl required value={name} name="name" type="name"
placeholder="Name" onChange={this.onChange} />
</Col>
</FormGroup>
<FormGroup controlId="formHorizontalPassword">
<Col componentClass={ControlLabel} sm={2}>
Email
</Col>
<Col sm={10}>
<FormControl required value={email} name="email" type="email"
placeholder="Email" onChange={this.onChange}/>
</Col>
</FormGroup>
<FormGroup>
<Col componentClass={ControlLabel} bsSize="lg" sm={2}>
Message
</Col>
<Col sm={10}>
<FormControl required value={message} name="message" componentClass="textarea" style={{ height: 200 }}
type="message" placeholder="Insert message here" onChange={this.onChange}/>
</Col>
</FormGroup>
<FormGroup>
<Col smOffset={2} sm={10}>
<Checkbox>Flag as important</Checkbox>
</Col>
</FormGroup>
<FormGroup>
<Col smOffset={2} sm={10}>
<Button type="submit">
Send
</Button>
</Col>
</FormGroup>
</Form>
</Col>
<Col xs={2}>
</Col>
</Row>
</Grid>
</div>
)
}
}
Short answer is that You cannot send mail from the client. You will need to have a server to do so. If you have an api service that your React is consuming from, then it is very possible from there.