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.
Related
I have this code that maps and displays my website's posts from an array.
import articleContent from '../data/articleContent';
const ArticlesList = () => (
<>
<ArticlesStyle>
<h1 className="article-h1">Nasze artykuły</h1>
{articleContent.map((article, key) =>
<Link className="article-link" key={key} to={`/artykul/${article.name}`}>
<Row className="align-items-center text-center">
<Col xs={4} md={5}>
<h2 style={{ color: '#14B2E6' }}>{article.title}</h2>
</Col>
</Row>
<Row className="align-items-center text-center">
<Col className="text-left" xs={8} md={5}>
<p style={{ color: 'black' }}>{article.content[0].substring(0, 150)}...</p>
</Col>
</Row>
</Link>
)}
</ArticlesStyle>
</>
)
My goal is to automatically display two posts in one row (so two columns in a row I guess) on PC display and one post in a row on mobile. I tried to make some small adjustments to make it work, but I am clueless now.
This is how it looks now on PC, I can't get rid of this marked area - I think it's an issue related to display: flex;.
You can use CSS-grid for this. For web make the number of column 2 and then by using media queries in CSS you can make the number of column 1 in case of mobile width.
Ok, so I managed to solve my own problem.
First of all I added outer (outer to .map function) Row and Col. I wrapped everything inside of .map function into Container.
const ArticlesList = () => (
<>
<ArticlesStyle>
<Row>
<Col className="article-list-grid">
{articleContent.map((article, key) =>
<Container className="wrapper">
<Link className="article-link" key={key} to={`/artykul/${article.name}`}>
<Row className="align-items-center text-center">
<Col xs={true} md={true}>
<h2 style={{ color: '#14B2E6' }}>{article.title}</h2>
</Col>
</Row>
<Row className="align-items-center text-center">
<Col xs={true} md={true}>
<p style={{ color: 'black' }}>{article.content[0].substring(0, 150)}...</p>
</Col>
</Row>
</Link>
</Container>
)}
</Col>
</Row>
</ArticlesStyle>
</>
)
After that everything comes to styling which looks like this:
const ArticlesStyle = styled.div`
.article-list-grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.wrapper {
#media (max-width: 600px) {
flex: 100%;
}
#media (min-width: 900px) {
flex: 50%;
}
}
.article-link {
text-decoration: none;
}
`;
The most important thing here is flex: 50% on PC screens which result with 2 columns in a row. Everything looks as I wanted right now:
PC
MOBILE
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>
Using ant design react UI library, I'm trying to create row with three columns of type flex, but still column are not taking flex property.
find the below code:
<Content className="site-layout-background">
<Row gutter={16} className="homepage-row" type="flex" align="middle">
<Col className="gutter-row" span={6}>
<div style={style}>col-6</div>
</Col>
<Col className="gutter-row" span={6}>
<div style={style}>col-6</div>
</Col>
<Col className="gutter-row" span={6}>
<div style={style}>col-6</div>
</Col>
</Row>
</Content>
Here is my additional css added,
.ant-row .homepage-row{
width: 100%;
}
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.