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;
Related
I'm trying to implement a card component with multiple columns with the first column set as an edit button and the last column as a details button. Something like this
I'm using reactstrap library to do this but but I'm not able to set a background to the whole height of a card instead of just the column height. This is my code
import {
Card,
CardImg,
CardText,
CardBody,
CardTitle,
CardSubtitle,
Button
} from 'reactstrap';
return (<Card style={{
textAlign: "left",
margin:"3%",
padding:"3%"
}}>
<Row style={{
display: "flex"
}}>
<Col sm="3">
<CardImg top="top" style = {{width:"80%", margin: "0.1rem"}} src={logo} alt="Card image cap"/>
</Col>
<Col sm="9">
<CardBody>
<CardTitle tag="h5" style={{fontWeight:"bold"}}>Project title</CardTitle>
<Row style = {{display: "flex"}}><Col sm="6">{data.profName}</Col>
<Col sm="6">{data.dept}</Col>
</Row>
<CardText style={{color:"#000000"}}>{data.description}</CardText>
<Row style={{
display: "flex",
fontSize:"20px"
}}>
<Col sm="3" style={{alignItems:"center"}}><img src="a1.png" alt="" style={{width:"20%"}}/>{data.duration} months</Col>
<Col sm="3" style={{alignItems:"center"}}><img src="a3.png" alt="" style={{width:"20%"}}/>{data.totalSlots} students</Col>
<Col sm="3" style={{alignItems:"center"}}><img src="a2.png" alt="" style={{width:"20%"}}/>INR {data.stipend}</Col>
<Col sm="3" style={{background:"rgb(15, 135, 151)", padding:"0", margin:"0"}}>
<center>
<Link to ={"/Projects/" + data["project-uid"]}><Button style={{
backgroundColor: "#0F8797",
color: "white"
}}>Details</Button></Link>
</center>
</Col>
</Row>
</CardBody>
</Col>
</Row>
</Card>);
Which makes the Details button look like this
Why don't you try putting the buttons outside of the card? You can make a row that contains the card with a button before and a button after. The buttons will be the full height of the row, and you can make the row flex and apply flex-grow to the card, with the buttons having fixed widths.
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'm trying to make a two column view for some components as such
<Grid fluid={true}>
<Row>
<Col sm={6}>
<Component>
</Col>
<Col sm={6}>
<Component>
</Col>
<Col sm={6}>
<Component>
</Col>
<Col sm={6}>
<Component>
</Col>
....
</Row>
</Grid>
The component can be different sizes. The problem I'm running into is that when a component in the left column is taller in height than the component to the right, then the component that is supposed to go on the left in the next row, ends up filling in the space left open by the smaller component on the right.
See problem here
I want the left component for row 2 to go under the left component for row 1 and then the following right component for row 2, to be directly adjacent to the left component and not take up any of the extra white space left by the right component for row 1.
Any solutions would be appreciated!!
I reproduced it and there isn't such issue and it works as you expecting (maybe you added some stylesheets that caused the issue, or using <Component> instead of <Component/> causes the issue):
(Note that i used latest version of react-bootstrap, and Grid is renamed to Container in this version.)
import React from "react";
import { Container, Row, Col } from "react-bootstrap";
const Component = props => (
<div
style={{
height: props.height ? props.height + "px" : "auto",
background: "#35f",
margin: "10px",
color: "white"
}}
>
component
</div>
);
export default () => (
<Container fluid>
<Row>
<Col sm={6}>
<Component height={200} />
</Col>
<Col sm={6}>
<Component height={100} />
</Col>
<Col sm={6}>
<Component height={50} />
</Col>
<Col sm={6}>
<Component />
</Col>
</Row>
</Container>
);
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.
I have a ListGroup with ListGroupItems that get populated by some data. Part of that data is a description, which obviously varies in length.
<ListGroup className="signal-info-container">
{
signalConstants[this.props.signalType].map((signal, i) => (
<ListGroupItem key={i}>
<Row>
<Col xs={3}>
{signal.name}
</Col>
<Col xs={5}>
{signal.description}
</Col>
<Col xs={3} className="aggregation">
<Checkbox inline={true}></Checkbox>
<Checkbox inline={true}></Checkbox>
<Checkbox inline={true}></Checkbox>
<Checkbox inline={true}></Checkbox>
</Col>
</Row>
</ListGroupItem>
))
}
</ListGroup>
Sometimes that description needs to wrap (as seen below).
What I would like to have happen is for the checkboxes in the right column vertically align in the center of the col.
I have tried to override react-bootstrap with some custom css. The following css results in the previous image.
.aggregation {
display: flex;
align-items: center;
}
Not sure how relevant it is, but the columns have a height of 0px. What confuses me is why the single-line descriptions are centered, but multi-line descriptions are not. Here is an image of the 0px cols:
I have noticed that there seems to be some sort of label applied to the checkbox which is getting centered by the applied CSS, but I need it applied on the actual checkbox instead. I have just removed the title attribute from my checkboxes. The effect is still the same (labels weren't showing up anyways).
You need to apply display: flex; align-items: center; to the entire <tr> so it recognizes the multi-line descriptions. So you should add a class to the <Row> that uses these rules.
Try modifying your component as so:
<ListGroup className="signal-info-container">
{
signalConstants[this.props.signalType].map((signal, i) => (
<ListGroupItem key={i}>
<Row>
<Col xs={3}>
{signal.name}
</Col>
<Col xs={5}>
{signal.description}
</Col>
<Col xs={3}>
<CheckboxRow>
<Checkbox title='min' inline={true}></Checkbox>
<Checkbox title='max' inline={true}></Checkbox>
<Checkbox title='avg' inline={true}></Checkbox>
<Checkbox title='sum' inline={true}></Checkbox>
</CheckboxRow>
</Col>
</Row>
</ListGroupItem>
))
}
</ListGroup>
Where CheckboxRow is
const CheckboxRow = ({children}) => (
<div style={
"display": "flex",
"justify-content": "center",
"align-items": "center"
}>
{children}
</div>
)
or extract that CSS out to a stylesheet if you have one.
Reason for adding the extra div layer is that it's safer than trying to override styles on the column components, since it's purpose is not to lay elements our horizontally.
The 'justify-content: center' centers the items horizontally, 'align-items: center' centers the items vertically.