I would like to know if there is a component that allows me to center vertical/horizontal anything I want without writing custom CSS?
I have tried react-center and react-flexbox-grid but without any success.
It would be nice if there is some component that allows me to set how I want to align both horizontal and vertical trough properties.
EDIT:
This is the code I have:
import React from 'react';
import {InputGroup, InputGroupAddon, Input, Button} from 'reactstrap';
import {Row, Col} from 'react-flexbox-grid';
import FlexView from 'react-flexview';
class Login extends React.Component{
render(){
return(
<FlexView hAlignContent='center' vAlignContent='center'>
<div>
{/*Row for username*/}
<Row>
<Col xs/>
<Col xs>
<InputGroup id="loginGroup">
<InputGroupAddon addonType="prepand">
#
</InputGroupAddon>
<Input placeholder="username" />
</InputGroup>
</Col>
<Col xs/>
</Row>
<br/>
{/*Row for password*/}
<Row>
<Col xs="3" sm="3"/>
<Col xs="6" sm="6">
<InputGroup id="loginGroup">
<InputGroupAddon addonType="prepand">
....
</InputGroupAddon>
<Input placeholder="password" type="password" />
</InputGroup>
</Col>
<Col xs="3" sm="3"/>
</Row>
<br/>
<Row>
<Col xs="3" sm="3"/>
<Col className="text-center" xs="6" sm="6">
<Button color="primary">Login</Button>
</Col>
<Col xs="3" sm="3"/>
</Row>
</div>
</FlexView>
);
}
}
export default Login;
I know, that whatever solution on the web I found, it is not working. I can horizontal align everything in the center without any problems, but vertical alignment is a problem.
I am even trying react-flexview component but I can't make it center with vertical alignment.
Thanks.
I don't know much about FlexView package. You can go without by managing how you organize your styles.
Here is a basic example
html, body {
margin: 0;
padding: 0;
height: 100%;
}
main {
height: 100%;
display: flex;
background-color: pink;
flex-direction: column; /* defined the main axis */
justify-content: center; /* y-axis */
align-items: center; /* x-axis */
}
section {
height: 100px;
width: 100px;
background-color: blue;
}
<html>
<body>
<main>
<section>
</section>
</main>
</body>
</html>
How you might implement this for React:
// Please see: https://reactjs.org/docs/faq-styling.html
// The parent container that defines the size of the container
const mainContainer = {
height: 500,
width: 500,
display: flex;
flex-direction: 'column',
justifyContent: 'center',
alignItems: 'center',
}
const content = {
height: 100,
width: 100,
}
The render method may look like this:
return (
<section style={mainContainer}>
<article style={content}>
</article>
</section>
)
I have managed to find proper solution for what I want to do.
I have managed to make react-center component work properly and this is the code that is working:
import React from 'react';
import ReactCenter from 'react-center';
import {Row, Col} from 'react-flexbox-grid';
import Input from '#material-ui/core/Input';
import Button from '#material-ui/core/Button';
class Login extends React.Component{
render(){
return(
<div id="loginForm" style={{height: "100vh", width: "100vw"}}>
<ReactCenter style={{height: "100vh", width: "100vw"}}>
<div style={{height: "200px", width: "300px"}}>
<Row>
<Col xs="3" sm="3" lg="3"/>
<Col xs="6" sm="6" lg="6">
<Input placeholder="username" />
</Col>
<Col xs="3" sm="3" lg="3"/>
</Row>
<br/>
{/*Row for password*/}
<Row>
<Col xs="3" sm="3" lg="3"/>
<Col xs="6" sm="6" lg="6">
<Input placeholder="password" type="password" />
</Col>
<Col xs="3" sm="3" lg="3"/>
</Row>
<br/>
<Row>
<Col xs="3" sm="3" lg="3"/>
<Col xs="6" sm="6" lg="6">
<Button variant="outlined" color="primary">Login</Button>
</Col>
<Col xs="3" sm="3" lg="3"/>
</Row>
</div>
</ReactCenter>
</div>
);
}
}
export default Login;
And ofc, I had to place style="height: 100vh;" in the index.html for the main div.
Related
Am using antd components for ui design, while using these components some of the components works and others not.
Imported all of the components
import {
Table,
Typography,
Select,
Space,
Row,
Col,
Form,
Button,
Layout,
Tag,
Badge,
Title,
Content,
Divider,
Progress,
Text
} from "antd/lib";
<Row>
<Col span={12} />
<Col span={12} pull={5}></Col>
<Layout>
<Content style={{ padding: "30px 20px" }}>
<div style={{ padding: 24, backgroundColor: "#fff" }}>
<Title level={4}>Coverage Report</Title>
<Divider />
<Row justify="space-between">
<Col span={6}></Col>
<Col span={6}>
<Progress type="circle" percent={100} />
</Col>
<Col span={6} style={{ marginTop: "50px" }}>
<Text strong>
{data.length - selectedRowKeys.length} tests are available to test
</Text>
</Col>
<Col span={6}></Col>
</Row>
</div>
</Content>
</Layout>
</Row>
No issue with Row, Col, and Layout components beacause i have already used these components before this code, the issue is with other components like Content, Title, Text and Progress.
Antd version - ^4.7.2
React - ^17.0.1
I believe this is because you aren't importing Content, Title and Text correctly. Looking at docs for Title and Text it is part of Typography.
const {Title, Text} = Typography;
const {Content} = Layout;
In a react app I want to remove padding from both left and right sides of each column. I guess this padding of 15px is being given to each column by react-bootstrap because what I saw is as:
padding-right: 15px;
padding-left: 15px;
which is not removable(I tried to do so but failed). My images on a page are showing as below:
Note: showing color Green is padding from both left and right side applied to each column which I want to remove.
My desired output for images on a page is something like as below:
My code:
.js file
import React from 'react'
import './style.scss';
import { Row, Col } from 'react-bootstrap'
import { Images } from '../../../../Shared/Assets';
import ImagesIcon from '../../../../Components/Cells/ImagesIcon'
const ImgGallery = () => {
return (
<>
<div className='ImgGalry'>
<Row>
<Col lg='3'>
<ImagesIcon src={Images.xgallery4} />
</Col>
<Col lg='3'>
<ImagesIcon src={Images.xgallery2} />
</Col>
<Col lg='3'>
<ImagesIcon src={Images.xgallery1} />
</Col>
<Col lg='3'>
<ImagesIcon src={Images.xgallery2} />
</Col>
</Row>
</div>
</>
);
}
export default ImgGallery;
.scss file
.ImgGalry{
overflow: hidden;
background-color: #01FF56;
img{
width: 100% !important;
height: 100% !important;
}
}
To all, is it possible to remove or hide padding of column(s) when created using react-bootstrap? Thanks.
add px-0 class to col
<Row className="no-gutters">
<Col lg='3' className="px-0">
<ImagesIcon src={Images.xgallery4} />
</Col>
<Col lg='3' className="px-0">
<ImagesIcon src={Images.xgallery2} />
</Col>
<Col lg='3' className="px-0">
<ImagesIcon src={Images.xgallery1} />
</Col>
<Col lg='3' className="px-0">
<ImagesIcon src={Images.xgallery2} />
</Col>
</Row>
i have two div login and forget password. i want on forget password login block should be hide and when login block needed forget block should be hidden. Now i able to handle forgot password block , but login block i am not able to handle. I want login block hide on click of forgot button. I have written my own code below. Can some one please suggest me how can i do that.
import React, { useEffect, useState } from 'react';
import useForm from 'react-hook-form';
import { Redirect } from 'react-router-dom';
import './loginForm.css';
const { Header, Content, Footer } = Layout;
const LoginForm = () => {
const [forgotPass, setForgotPass] = useState(false);
if (redirect) {
return <Redirect to={routePaths.DASHBOARD} push />;
}
return (
<Layout>
<Header className="header">
<div>
<img src={logo} className="logo" />
<span className="lft">
<MessageOutlined />
</span>
</div>
</Header>
<Content className="content-screen">
<Row>
<Col xs={24} sm={24} md={8} />
<Col xs={24} sm={24} md={8}>
<div id="loginDiv" className="screen">
<Card title="Login to Relocatte" headStyle={{ backgroundColor: '#69c0ff', border: 1 }}>
<form onSubmit={handleSubmit(onSubmit)}>
{/* <h2 style={{textAlign: 'center'}}>Login</h2> */}
<Row>
<Col style={{ padding: 10 }}>
<Input size="large" placeholder="Enter User Email Here..." onChange={(e) => setValue('email', e.target.value)} />
<ErrorTag errors={errors} name="email" />
</Col>
<Col style={{ padding: 10 }}>
<Input type="password" size="large" placeholder="Enter User Password Here..." onChange={(e) => setValue('encryptedPassword', e.target.value)} />
<ErrorTag errors={errors} name="encryptedPassword" />
</Col>
<Col span={7} style={{ padding: 15 }} className="forget">
Sign Up
</Col>
<Col span={7} style={{ padding: 10 }}>
<Input style={{ cursor: 'pointer' }} type="submit" value="Login" className="login-form-button" shape="round" icon="rollback" />
</Col>
<Col span={10} style={{ padding: 15 }} className="forget">
<a href="#" onClick={() => setForgotPass(!forgotPass)}>Forgot Password</a>
{/* <button onClick={() => setForgotPass(!forgotPass)}>Forgot Password</button> */}
</Col>
</Row>
</form>
</Card>
</div>
</Col>
<Col xs={24} sm={24} md={8}>
{/* forgot div goes here */}
{forgotPass
&& (
<div className="screen">
<Card title="Forgot Password" headStyle={{ backgroundColor: '#69c0ff', border: 1 }}>
<form onSubmit={handleSubmit(onSubmit)}>
{/* <h2 style={{textAlign: 'center'}}>Login</h2> */}
<Row>
<Col style={{ padding: 10 }}>
<Input size="large" placeholder="Enter Registered Email Here..." onChange={(e) => setValue('', e.target.value)} />
<ErrorTag errors={errors} name="" />
</Col>
<Col span={12} style={{ padding: 10 }}>
<Input style={{ cursor: 'pointer' }} type="submit" value="Send Reset Link" className="login-form-button" shape="round" icon="rollback" />
</Col>
<Col span={10} style={{ padding: 15 , textAlign: "right"}} className="forget">
<a href="#" onClick={() => setForgotPass(!forgotPass)}>Login</a>
{/* <button onClick={() => setForgotPass(!forgotPass)}>Forgot Password</button> */}
</Col>
</Row>
</form>
</Card>
</div>
)}
</Col>
</Row>
</Content>
<Footer className="footer-back">
<Row>
<Col xs={24} sm={24} md={12} className="foot-child-1">
All Right Reserved© 2020 Relocatte
</Col>
<Col xs={24} sm={24} md={12} className="foot-child-2">
<span>Privacy Policy</span>
<span> | </span>
<span>Term & Conditions</span>
</Col>
</Row>
</Footer>
</Layout>
);
};
export default LoginForm;
Hi Please check this example:
import React, {useEffect, useState} from 'react';
const LoginForm = () => {
const [forgotPass, setForgotPass] = useState(false);
function handleLogin(event) {
}
function handleForgot(event) {
setForgotPass(!forgotPass);
}
function handleReset(event) {
alert('Your password is reset');
setForgotPass(!forgotPass);
}
return (
<div>
{forgotPass ?
(<div>
Username: <input/> <br/>
<button onClick={handleReset}>Reset Password</button>
</div>)
:
(<div>
Username: <input/> <br/>
Password: <input/> <br/>
<button onClick={handleLogin}>Login</button>
<button onClick={handleForgot}>Forgot Password</button>
</div>)
}
</div>
);
};
export default LoginForm;
There are 2 ways of doing it
Using ternary operator
return (<div className="container">
{forgotPass ? <div>Forget password div </div> : <div> Login Div</div>}
</div>)
Using CSS
return (<div className="container">
<div className={forgotPass ? "show" : "hide"}>Forget password div </div>
<div className={!forgotPass ? "show" : "hide"}> Login Div</div>}
</div>)
in your css:
.show { display: 'block' }
.hide { display: 'none' }
I am building a web application in react and using reactstrap for certain ui design elements. I have arranged elements in row and columns. Everything else works fine but the button element is not getting aligned properly like the other elements in the row are. The button is slightly below than the other elements. Can someone tell me what i am doing wrong? Any help would be appreciated. Thank You.
App.js
<Container>
<Row>
<Col>
<text>{item1.Title}</text>
</Col>
<Col>
<input type="text" onChange={this.handleNameChange}/>
</Col>
<Col>
<Button onClick={()=>this.handleName(this.state.itemName,item1.Title,item.Title)} color="success" size="sm" >Save</Button>
</Col>
</Row>
</Container>
UPDATE
The button column seems to be having some sort of padding.
The textbox doesnt have any padding
give the 3rd Col a className and use the following css:
.class-col {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
height: 100%;
}
.main-container {
display: flex;
}
And you code:
<Container>
<Row className="main-container">
<Col className="class-col">
<text>{item1.Title}</text>
</Col>
<Col className="class-col">
<input type="text" onChange={this.handleNameChange}/>
</Col>
<Col className="class-col">
<Button onClick={()=>this.handleName(this.state.itemName,item1.Title,item.Title)} color="success" size="sm" >Save</Button>
</Col>
</Row>
</Container>
Give this a try.
I am new to reactjs - and I am trying to integrate a rich text editor into a component. The component itself is a bit complex and contains various logic to loop through a json fragment.
I'd like to place the rich text editor inside the component - but when I put the code to invoke it inside -- I loose scope of the this -- it complains on the this.state.
This is the rich text editor markup
<RichTextEditor
value={this.state.value}
onChange={this.onChange}
toolbarConfig={toolbarConfig}
/>
this is the current code
return (
<div>
<MetaSpecific title={lang.metaData.title} description={lang.metaData.description} />
<Intercom appID='bg69flze' custom_launcher_selector='.open_intercom' />
<Spacers />
<RichTextEditor
value={this.state.value}
onChange={this.onChange}
toolbarConfig={toolbarConfig}
/>
<div className='background--white background--white--medium background--white--small'>
{
lang.status[0].items.map(function (item, index) {
return (
<div key={index}>
{
(lang.status[0].dashboard === 'expert')
// after interview section - professional
? <Expert lang={lang} item={item} />
// after interview section - employer
: (lang.status[0].dashboard === 'employer')
? <Employer lang={lang} item={item} />
: null
}
<Row type='flex' justify='center' className='border__transparent--top' style={{maxWidth: '1200px', marginLeft: 'auto', marginRight: 'auto'}}>
<form>
{
(lang.status[0].dashboard === 'employer')
// after interview section - professional
? <EmployerPanel lang={lang} />
: null
}
<Col xs={24} md={24} lg={24} style={{background: '#eff2f4', padding: '50px 65px 0'}}>
<div className='' style={{background: '#ffffff', padding: '30px'}}>
<h3 style={{paddingBottom: '30px'}}>Shareholder agreement for a UK startup</h3>
<Row>
<Col xs={7} md={7} lg={7}>
<h3 style={{paddingBottom: '30px'}}>Projektfrist</h3>
</Col>
<Col xs={5} md={5} lg={5}>
16 June 2017
</Col>
</Row>
<h3 style={{paddingBottom: '30px'}}>Projektbeschreibung</h3>
<p className='text--font-size-14'>This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description</p>
<p className='text--font-size-14'>This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description</p>
</div>
</Col>
<Col xs={24} md={24} lg={24} style={{background: '#eff2f4', padding: '50px 65px 0'}}>
<div className='' style={{background: '#ffffff', padding: '30px'}}>
<h3 style={{paddingBottom: '30px'}}>Vorschlag zur Provision</h3>
<Row>
<Col xs={7} md={7} lg={7}>
Vergutungsmodell
</Col>
<Col xs={5} md={5} lg={5}>
Fixed rate
</Col>
</Row>
<br />
<Row>
<Col xs={7} md={7} lg={7}>
Fix Vergutung exkl. MwSt. (€)
</Col>
<Col xs={5} md={5} lg={5}>
<Input placeholder='Final Price' style={{border: '1px solid #c5c8cf'}} />
</Col>
</Row>
<Row>
<Col xs={7} md={7} lg={7}>
Ihr angestrebtes Projecktende
</Col>
<Col xs={5} md={5} lg={5}>
<Input placeholder='16/06/2017' style={{border: '1px solid #c5c8cf'}} />
</Col>
</Row>
</div>
</Col>
<Col xs={24} md={24} lg={24} style={{background: '#eff2f4', padding: '50px 65px 0'}}>
<div className='' style={{background: '#ffffff', padding: '30px'}}>
<h2 className='text--font-size-14'>Beschreibung de Angebots</h2>
<h2 className='text--font-size-14'>xx xx xx xx xx xx</h2>
<p className='text--font-size-14'><Input type='textarea' rows={4} /></p>
<p>RICH TEXT</p>
</div>
</Col>
<Col xs={24} md={24} lg={24} style={{background: '#eff2f4', padding: '50px 65px'}}>
<div className='' style={{background: '#ffffff', padding: '30px'}}>
<h2 className='text--font-size-14'>Mandatscereinbarung</h2>
<Input type='submit' value='PDF hochladen' style={{width: '200px', color: '#ffffff'}} />
</div>
</Col>
</form>
</Row>
</div>
)
})
}
</div>
</div>
)
but when I try and place the rich text editor in the correct part of the markup it breaks and looses scope on the this.
return (
<div>
<MetaSpecific title={lang.metaData.title} description={lang.metaData.description} />
<Intercom appID='bg69flze' custom_launcher_selector='.open_intercom' />
<Spacers />
<div className='background--white background--white--medium background--white--small'>
{
lang.status[0].items.map(function (item, index) {
return (
<div key={index}>
{
(lang.status[0].dashboard === 'expert')
// after interview section - professional
? <Expert lang={lang} item={item} />
// after interview section - employer
: (lang.status[0].dashboard === 'employer')
? <Employer lang={lang} item={item} />
: null
}
<Row type='flex' justify='center' className='border__transparent--top' style={{maxWidth: '1200px', marginLeft: 'auto', marginRight: 'auto'}}>
<form>
{
(lang.status[0].dashboard === 'employer')
// after interview section - professional
? <EmployerPanel lang={lang} />
: null
}
<Col xs={24} md={24} lg={24} style={{background: '#eff2f4', padding: '50px 65px 0'}}>
<div className='' style={{background: '#ffffff', padding: '30px'}}>
<h3 style={{paddingBottom: '30px'}}>Shareholder agreement for a UK startup</h3>
<Row>
<Col xs={7} md={7} lg={7}>
<h3 style={{paddingBottom: '30px'}}>Projektfrist</h3>
</Col>
<Col xs={5} md={5} lg={5}>
16 June 2017
</Col>
</Row>
<h3 style={{paddingBottom: '30px'}}>Projektbeschreibung</h3>
<p className='text--font-size-14'>This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description</p>
<p className='text--font-size-14'>This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description</p>
</div>
</Col>
<Col xs={24} md={24} lg={24} style={{background: '#eff2f4', padding: '50px 65px 0'}}>
<div className='' style={{background: '#ffffff', padding: '30px'}}>
<h3 style={{paddingBottom: '30px'}}>Vorschlag zur Provision</h3>
<Row>
<Col xs={7} md={7} lg={7}>
Vergutungsmodell
</Col>
<Col xs={5} md={5} lg={5}>
Fixed rate
</Col>
</Row>
<br />
<Row>
<Col xs={7} md={7} lg={7}>
Fix Vergutung exkl. MwSt. (€)
</Col>
<Col xs={5} md={5} lg={5}>
<Input placeholder='Final Price' style={{border: '1px solid #c5c8cf'}} />
</Col>
</Row>
<Row>
<Col xs={7} md={7} lg={7}>
Ihr angestrebtes Projecktende
</Col>
<Col xs={5} md={5} lg={5}>
<Input placeholder='16/06/2017' style={{border: '1px solid #c5c8cf'}} />
</Col>
</Row>
</div>
</Col>
<Col xs={24} md={24} lg={24} style={{background: '#eff2f4', padding: '50px 65px 0'}}>
<div className='' style={{background: '#ffffff', padding: '30px'}}>
<h2 className='text--font-size-14'>Beschreibung de Angebots</h2>
<h2 className='text--font-size-14'>xx xx xx xx xx xx</h2>
<p className='text--font-size-14'><Input type='textarea' rows={4} /></p>
<RichTextEditor
value={this.state.value}
onChange={this.onChange}
toolbarConfig={toolbarConfig}
/>
</div>
</Col>
<Col xs={24} md={24} lg={24} style={{background: '#eff2f4', padding: '50px 65px'}}>
<div className='' style={{background: '#ffffff', padding: '30px'}}>
<h2 className='text--font-size-14'>Mandatscereinbarung</h2>
<Input type='submit' value='PDF hochladen' style={{width: '200px', color: '#ffffff'}} />
</div>
</Col>
</form>
</Row>
</div>
)
})
}
</div>
</div>
)