I'm using Ant Design for a React project. It seems quite good and easy to use, except for one thing : vertical alignment. I'm trying to vertical align those 2 blocks of text on the right inside their grey parent div but cant make it work.
If I use foundation 6 it works perfectly but with ant cant figure it out what's wrong. So here is my code :
<Row className="keynumbers" align="middle">
<Col span={12}>
<Graph tickets={nature} />
</Col>
<Col span={12} align='middle'>
<Space
direction="vertical"
size="middle"
style={{
display: 'flex',
}}
>
<TotalTickets total={total} />
<TimeSolving
tickets={resolution}
/>
</Space>
</Col>
</Row>
The components TimeSolving and TotalTickets are basic div :
TotalTickets
<div class="block" >
<h3>{volumeTickets}</h3>
<p>nombre de tickets</p>
</div>
TimeSolving
<div class="block">
<h3>{prop.tickets}</h3>
<p>temps moyen de résolution</p>
</div>
and the css for .block
.block{
background: #f8f8f8;
height: 140px;
}
I just want to vertical align those two blocks of text.
Did I miss something ?
Thanks a lot
If you are adding css for your block class, you can use flexbox to vertically centre its contents
.block {
background: #f8f8f8;
height: 140px;
display: flex;
flex-direction: column;
justify-content: center;
}
Edit:
You could achieve similar with Ant's Space primitive, which is really just a Flexbox primitive.
const TimeSolving = () => (
<Space
direction="vertical"
size={0}
style={{
height: 140,
justifyContent: "center"
}}
>
<h3>10</h3>
<p>temps moyen de résolution</p>
</Space>
);
Maybe you need to set <Col />'s span as {24}? Because Ant Design uses 24 grid.
<Row className="keynumbers" align="middle">
<Col span={24}>
<Graph tickets={nature} />
</Col>
<Col span={24} align='middle'>
<Space direction="vertical" size="middle" style={{ display: 'flex' }}>
<TotalTickets total={total} />
<TimeSolving tickets={resolution} />
</Space>
</Col>
</Row>
Related
I'm having some problems lining up some React Bootstrap cards, the only way I could align them horizontally was by putting them both inside a div, but I need a component for each card, if I ran the code that way, it would end up going wrong
Basically, every time I add a card, it's aligned vertically, not horizontally.
HostingCard.tsx
import { Card, Button } from "react-bootstrap";
import "./App.css";
export default function HostingCard() {
return (
<div className="main">
<Card style={{ width: "18rem" }}>
<Card.Img variant="top" src="https://picsum.photos/200" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
</div>
);
}
App.tsx
import React from "react";
import "./App.css";
import Header from "./Header";
import HostingCard from "./HostingCard";
function App() {
return (
<div className="App">
<Header />
<h1 style={{ padding: "1rem" }}>Hospedagens</h1>
<HostingCard />
<HostingCard />
</div>
);
}
App.css
.main {
display: flex;
flex-direction: row;
margin: 0.1rem;
padding: 1rem;
}
flexDirection: row applies to the children inside the row. You're creating a column of rows where each row contains only one item in each.
For the row to work as a row it needs to be a container for the cards, something like this:
function App() {
return (
<div className="App">
<Header />
<h1 style={{ padding: "1rem" }}>Hospedagens</h1>
<div style={{ flexDirection: 'row', /* ...more styles */ }}>
<HostingCard />
<HostingCard />
</div>
</div>
);
}
Since you're already using React Bootstrap, you can browse its Layout docs and choose something suitable that they already built instead of styling your own div.
Horizontal Stack looks like what you want:
function App() {
return (
<div className="App">
<Header />
<h1 style={{ padding: "1rem" }}>Hospedagens</h1>
<Stack direction="horizontal" gap={4}>
<HostingCard />
<HostingCard />
</Stack>
</div>
);
}
Look at its implementation and you'll see it's ultimately a div container with flexDirection: row plus a bunch of additional preset options and styles.
These are my cards and this is it's CSS code
card: {
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
border: 'solid 1px #f0eff2',
paddingRight: '1rem',
},
and this is my react js code for the card content
<div className={classes.card}>
<Checkbox />
<div className={classes.title}>{title}</div>
<div>{description.substring(0, 70)} ...</div>
<div>{time}</div>
<div>
{favourite ? (
<BookmarkIcon className={classes.gold} />
) : (
<BookmarkTwoToneIcon />
)}
</div>
<div>
<IconButton>
<MoreIcon />
</IconButton>
</div>
</div>
I want the content spaced and justified at left side so that the cards looks the same.
I want to align the content of the cards such that when the title of the content is too long, the other details such as the Created on, By and View would be on the same line. I've tried using a fixed height with min-height for the title row but I don't think it's a good solution as when the title is shorter, there will be a lot of white/empty space.
I also tried using flex-grow: 1 on the title but it won't fill up the empty spaces as well.
<Col>
<Card
className='text-center'
style={{
height: '100%',
padding: '15px',
borderRadius: '20px',
boxShadow: '0px 5px 15px 0px rgb(0 0 0 / 20%)'
}}
>
<Row style={{marginBottom: '5px'}}>
<Col md={6} style={{textAlign: 'left'}}>
<div
className='btn btn-success'}
style={{padding: '5px 25px', borderRadius: '50px', cursor: 'default', textTransform: 'capitalize'}}
>
{bulletin.liveStatus}
</div>
</Col>
<Col md={6} style={{textAlign: 'right'}}>
<div className='ellipsis-menu' ref={ref}>
<FaIcons.FaEllipsisH onClick={showDropDown} style={{cursor: 'pointer'}} />
</Col>
</Row>
<div className='view-bulletin-link'>
<Card.Img variant='top' src={imageCoverUrl} style={{objectFit: 'cover', height: '15rem', width: '100%', display: 'block'}}/>
<Card.Body>
<Card.Title style={{fontSize: '1rem'}}><strong>{bulletin.title}</strong></Card.Title>
<Card.Text>Created on {moment(bulletin.createdDate).format("DD/MM/YYYY")} <br />By {bulletin.createdBy}</Card.Text>
<Card.Text>{bulletin.viewCount > 1 ? <>{bulletin.viewCount} Views</> : <>{bulletin.viewCount} View</>}</Card.Text>
</Card.Body>
</div>
</Card>
</Col>
You can achieve this with flex.
Card content should have
flex-direction: col;
align-items: space-around
and wrap the top and bottom aligned elements in different div/spans.
You could group the created and view count together and make it bottom position.
See example below
<div style="postion:absolute; bottom: 0">
<Card.Text>Created on {moment(bulletin.createdDate).format("DD/MM/YYYY")} <br />By {bulletin.createdBy}</Card.Text>
<Card.Text>{bulletin.viewCount > 1 ? <>{bulletin.viewCount} Views</> : <>{bulletin.viewCount} View</>}</Card.Text>
</div>
For some reason my typography components are continuing on the same line. I have been trying to get them on 2 different lines but its not working.
<div class="center">
<Typography variant="h1" style={{flexGrow: 1}} gutterBottom>line 1</Typography>
<Typography variant="h6">line 2</Typography>
</div>
Both line 1 and line 2 show up on the same line.
Css for center:
.center {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
height: 500px; }
Add flex-direction:column to your css. Default behavior of flex is to wrap children and use row as direction. Or remove the entire flex styles and just use text-align:center
According the MaterialIU Typography documentation: https://material-ui.com/system/typography/#typography.
You can wrap text using Box component:
<Typography component="div" variant="h1">
<Box>
line 1
</Box>
</Typography
<Typography component="div" variant="h6">
<Box >
line 2
</Box>
</Typography>
My images at the moment are not centered vertically and I can't seem to fix it.
<Grid>
<Row className={styles.contain}>
<Col md={6} md={4} >
<div className={styles.testing>
<img src="https://docs.google.com/uc?id=0B0huBtqYaof7NFV6Nnpkalk5cEU" />
</div>
</Col>
<Col md={6} md={4} >
<img src="https://docs.google.com/uc?id=0B0huBtqYaof7NFV6Nnpkalk5cEU" />
</Col>
<Col md={6} md={4} >
<img src="https://docs.google.com/uc?id=0B0huBtqYaof7NFV6Nnpkalk5cEU" />
</Col>
</Row>
<Grid>
and here is the css:
.contain{
height:100%;
}
.testing{
vertical-align: middle;
display:inline-block;
}
This had no effect on the image.
It depends of the Bootstrap version. I'll assume it's Bootstrap 3 and not 4 (you would have written Reactstrap instead of Boostrap React).
Columns in B3 are floated by default and float is not vertical-align friendly as you may already know. So you could just apply display-inline:block to your columns and then vertical-align: middle. Doing so, you'll face the famous 4px gap.
You could also use flexboxes, but instead of "hacking" B3, you should then just go with B4 ;)
Note1: You don't need that <div className={styles.testing}></div>
Note2: <Col md={6} md={4}> is not good. You repeat md attribute for nothing here.
Set the className of a Row to justify-content-x-center
The screen_size can be xs,sm,md,lg,xl
The following example will show how to center ONE column in a row.
<Row className="justify-content-md-center row">
<Col className="col" screen_size={6}>
<img src = '...'/>
</Col>
</Row
.row {
border: 1px solid black
}
.col {
border: 1px solid yellow;
}
Added extra CSS in the example so you can see the row and col in your browser for visual understanding.
If you wish to center more images within that SAME column, all you would need to do is add the images within that column.
Ex.
<Row className="justify-content-md-center row">
<Col className="col" screen_size={6}>
<img src = '...'/>
<img src = '...'/>
<img src = '...'/>
</Col>
</Row