I am trying to use Next.js styling as per the docs but the current code only works for the background colour, but does not work for the test class on the image. What am I doing wrong?
<div className="header-bg">
<Container className="pt-5 pb-5">
<Row className="align-items-center">
<Col>
<h1>Welcome to the home page. Here is some text</h1>
<p>Here is some paragraph text</p>
<Button variant="info">Learn More</Button>
</Col>
<Col>
<Image src="chair.png" className="test" />
</Col>
</Row>
</Container>
<style jsx>{`
.header-bg {
background: grey;
}
.test {
max-width: 15px;
}
`}</style>
</div>
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>
I'm currently trying to learn the basics of React so I thought I'd try to mock-up another website. Currently, I'm trying to build a header that looks like Airbnb's
Unfortunately, I can't seem to figure out the aligning and how to get the logo to be all the way on the left side.
Any advice would be appreciated! Thanks!
<Flexbox flexDirection="column">
<Flexbox element="header" height="60px">
<div style={{ flexGrow: 0}}>
<img src={Logo} />
</div>
<div style={{flexGrow: 8}}>
<SearchBar
onChange={() => console.log('onChange')}
onRequestSearch={() => console.log('onRequestSearch')}
style={{
margin: '0 auto',
maxWidth: 800
}}
/>
</div>
<div>
<Button>Become a host</Button>
</div>
<div>
<Button>Sign up</Button>
</div>
<div>
<Button>Log in</Button>
</div>
</Flexbox>
</Flexbox>
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.
import { Card } from 'antd';
const { Meta } = Card;
ReactDOM.render(
<Card
hoverable
style={{ width: 240 }}
cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
>
<Meta
title="Europe Street beat"
description="www.instagram.com"
/>
</Card>
, mountNode);
From AntDesign's example, in the Card's Meta section, is there a way I would be able to add more description to the card like "price" or "author" and display it?
Unfortunately, Meta supports only fixed properties like title and description. https://ant.design/components/card/#Card.Meta
But if you want to add extra fields to the card, you can just add them to the Card html as children:
<Card
hoverable
style={{ width: 240 }}
cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
>
<Meta
title="Europe Street beat"
description="www.instagram.com"
/>
<div className="additional">
<p className="price">Price: 20$</p>
<p>Author: John Doe</p>
</div>
</Card>
See Codepen Demo.
it can be done like this
const { Card } = antd;
const { Meta } = Card;
ReactDOM.render(
<Card
hoverable
style={{ width: 240 }}
cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
>
<Meta
title="Europe Street beat"
description={[
<div>
<p>"www.instagram.com"</p>
<p> additional content</p>
</div>
]}
/>
<div className="additional">
<p className="price">Price: <span className="quantity">20$</span></p>
<p>Author: <span className="quantity">John Doe</span></p>
</div>
</Card>
, mountNode);
Meta supports only fixed properties like title and description. But If you want to add more details to your Card you can do it with help of description prop which supports by Meta.
You just need to write code as you do in JSX.
<Card hoverable style={{ width: 300, marginTop: 16 }}>
<Meta
description={ //Add your specific data here in description
<>
<div className="subject-card_extra-content">
<img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" style={{width:20}}/>
<span>Data</span>
</div>
<div className="dashboard-subject_inline-actions">
<Icon type="video-camera" />
<p>
Total Videos :<span> {5} </span>
</p>
</div>
<Button htmlType="submit" icon="play-circle" className="custom-default-fill-btn">
Continue Learning
</Button>
<Button htmlType="submit" icon="play-circle" className="custom-default-fill-btn">
No Progress
</Button>
</>
}
/>
</Card>