Please see my React code example:
import { Row, Col, Icon } from 'antd';
const MyRow = () => (
<Row align="middle">
<Col md={10}>Trouble is a friend</Col>
<Col md={10}><Icon type="play-circle-o" /></Col>
<Col md={4}><div>Lenka</div></Col>
</Row>
);
...
When I rendered <MyRow />, I found that the text in <Row> was centered vertically well, but the <Icon> component didn't do so. So that my <MyRow> didn't look good. I expected all the content, not only the text but also the SVG in <Row> could be centered vertically.
I also tried other icon library, e.g. react-icons-kit, which did not work.
Does anyone have an idea?
Fortunately, I found some solutions to this small problem myself.
For icons in #ant-design/icons:
import { PlayCircleFilled } from '#ant-design/icons';
<Row align="middle">
<Col>
<PlayCircleFilled
style={{
verticalAlign: 'middle',
}}
/>
</Col>
</Row>
For icons in react-icons:
import { RiVolumeUpLine } from "react-icons/ri";
<Row align="middle">
<Col>
<RiVolumeUpLine
style={{
verticalAlign: 'middle',
}}
/>
</Col>
</Row>
For Icon in old antd:
<Row type="flex" align="middle">
<Col>
<div
style={{
display: 'inline-flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<Icon
type="play-circle-o"
style={{
display: 'inline-block',
verticalAlign: 'middle',
}}
/>
</div>
</Col>
</Row>
For Icon in react-icons-kit:
import Icon from 'react-icons-kit';
import { ic_play_circle_outline } from 'react-icons-kit/md/ic_play_circle_outline';
...
<Row align="middle">
<Col>
<Icon icon={ic_play_circle_outline} style={{ verticalAlign: 'middle' }} />
</Col>
</Row>
This is not really antd specific, it's just about vertical centering in general.
I can recommend 6 Methods for Vertical Centering which discusses ways to do it on traditional CSS. The CSS Table method should work well in this case.
You also achieve it using Flexbox (<Row type="flex">), with align-items: center for the row.
Related
So I have my layout from Ant design and on the profile page theres one div at the top which has user's info.
Under it, there are many divs (one for each post), essentially mapping a post array into post divs.
Problem is, ive struggled with centring them to the middle of the page but after messing around with flex, i thought i did a good job in the end. It looked perfect at first when the user has no posts underneath the profile div. The moment there's posts, the profile div goes to the left alot for some goddamn reason.
The posts are perfectly centered like i want them but my problem is with the profile div. To fix it, i did a margin-left on the it. This makes it look perfect. But not so fast. Now when theres no posts, its awfully to the right cuz it was perfectly centered before the margin-left
So is there any way i can pass in a condition to say if posts.length === 0, and set the margin-left accordingly?
Losing my head.
Layout.js code:
<Content style={{ padding: '0 50px' }}>
<Breadcrumb style={{ margin: '16px 0' }}>
<Breadcrumb.Item>Home</Breadcrumb.Item>
<Breadcrumb.Item>Network</Breadcrumb.Item>
</Breadcrumb>
<div className="site-layout-content" style={{ background: "#fff ", padding: 24, minHeight: 280, display:"flex", alignItems:"center", flexDirection: "column"}}>
{children}
</div>
</Content>
UserProfile.js code :
<div>
<div className="site-card-wrapper" style={{display: "inline-block",marginBottom:20, width: 500, marginLeft:355}}>
<Row gutter={16} type="flex" style={{justifyContent: "center", }}>
<Col span={16}>
<Card title={user.username} bordered={true} style={{border: "1px solid #cccccc",}}>
<div style={{display:"flex", justifyContent: "space-between"}}>
<CardContent>Followers: {user.followers === undefined ? "0" : user.followers.length}</CardContent>
<CardContent>Following: {user.following === undefined ? "0" : user.following.length}</CardContent>
</div>
</Card>
</Col>
</Row>
</div>
{
(userPosts.length > 0) ?
<Heading>Posts</Heading> :
<Heading>No posts yet</Heading>
}
{
userPosts.map(post => {
return <SinglePost key={post.id} post={post} />
})
}
</div>
SinglePost.js code (simplified):
<div className="site-card-wrapper" style={{marginBottom:20, width: 1200,}}>
<Row gutter={16} type="flex" style={{justifyContent: "center"}}>
<Col span={16} >
<Card title={user.username} bordered={true} style={{border: "1px solid #cccccc"}}>
<div style={{fontSize: 18, marginTop: -10, whiteSpace: "pre-line"}}>
{post.content}
</div>
<Likes>{likes} Likes</Likes>
</Card>
</Col>
</Row>
</div>
<div className="site-card-wrapper"
style={
{display: "inline-block",
marginBottom:20,
width: 500,
marginLeft:posts.length === 0 ? 0 : 355
}}>
use above conditional statement to handle run time marginLeft
I'm using flexbox, React Material in my React App and i wanted to align the searchbar and the clear button on the same line and with space on each other.
Pls see this link
CLICK HERE
<div className={classes.searchBarSection}>
<Paper component="form" className={classes.searchBar}>
<InputBase
className={classes.input}
placeholder="Search..."
inputProps={{ "aria-label": "search..." }}
/>
<IconButton
type="button"
className={classes.iconButton}
aria-label="search"
>
<SearchIcon />
</IconButton>
</Paper>
<Button variant="contained" size="small" color="primary">
Clear
</Button>
</div>
try this:
searchBarSection: {
display: "flex",
justifyContent: "space-between",
width: "300px"
},
adjust the width for how much space you want between them
this will look like:
add these styles, the width will give the searchBatSection breathing room to space the children. Experiment around with the justifyContent options to find your suit.
searchBarSection: {
width: "50%",
display: "flex",
justifyContent: "space-between"
},
Use grid
searchBarSection: {
display: 'grid',
gridTemplateColumns: '0.8fr 0.2fr',
gap: '12px',
},
https://codesandbox.io/s/material-demo-6w93i
Using Ant.Design Tabs https://ant.design/components/tabs/
How can I set styling on TabPane so that it's min-height is always 100% height of the window even when it's empty?
Below example should cover the window with color #F5F5F5
This has worked for me.
<TabPane tab={tab.title} key={index}>
<Row>
<Col style={{minHeight: "100vh", maxheight: "100vh"}}>
Test
</Col>
</Row>
</TabPane>
So this has worked for me too
<Tabs
onChange={() => {
console.log("oi");
}}
type="card"
style={{ background: "blue", height: "100%" }}
>
<TabPane
tab="Tab 1"
key="1"
style={{ minHeight: "100vh", background: "red" }}
>
Content of Tab Pane 1
</TabPane>
</Tabs>
I couldn't figure out how to center buttons in Material-UI. This is the code I have:
function BigCard(props) {
const { classes } = props;
return (
<div>
<Card className={classes.card}>
<CardContent>
<Typography variant="display1" className={classes.title}>
Start Funding!
</Typography>
</CardContent>
<CardActions >
<Button size="small" color="primary" className={classes.actions}>
Share
</Button>
<Button size="small" color="primary">
Learn More
</Button>
</CardActions>
</Card>
</div>
);
How can I center my button?
You can use Box element
<Box textAlign='center'>
<Button variant='contained'>
My button
</Button>
</Box>
you could use the override with classes in the material ui doc,
FIRST WAY
You can do something like :
//Add your justify css in your styles const
const styles = {
...
root: {
justifyContent: 'center'
}
};
And use the classes props to add this to your CardActions component :
<CardActions classes={{root: classes.root}}>
SECOND WAY (easier)
OR You can use the style directly on your component, but i advise you to train how to use classes if you're working alot with material-ui
Just do something like :
<CardActions style={{justifyContent: 'center'}}>
For use cases that avoid defining css
<Grid container justify="center">
{props.children}
</Grid>
Here is how I did it with Material - UI
import {Typography, Button} from '#material-ui/core';
<Typography align='center'>
<Button
color='primary'
size='large'
type='submit'
variant='contained'
>
Sign Up
</Button>
</Typography>
Quick and dirty:
<Button style={{margin: '0 auto', display: "flex"}}>
NEXT
</Button>
From MUI v5, you can apply the custom styles using the sx props. Because CardActions layout is already flex, you only need to set its justify-content to center.
Using sx instead of inline styles like the other answer help reduce the CSS specificity, and make it easier to override the CSS in the future
<CardActions sx={{ justifyContent: "center" }}>
<Button size="small">Learn More</Button>
</CardActions>
Live Demo
What I tried is below and is also shown in official videos of material ui on youtube.
<Grid item xs={12} sm={12} md={4} lg={4}
style={{
textAlign:'center' // this does the magic
}}
>
<Button>
NEXT
</Button>
</Grid>
Thanks and best wishes
You have to use two properties: display and justify-content
<CardActions display='flex' justifyContent='center'>
This will centre your button horizontally
<Button
size="medium"
variant="contained"
color="primary"
style={{
display: "flex",
flexDirection: "row",
justifyContent:"center",
backgroundColor: purple[500],
'&:hover': {
backgroundColor: purple[700],
},
}}
>
Get Hired
</Button>
The easiest way is to use a Box wrapping around the button
<Box
sx={{
display: 'flex',
flexDirection: { xs: 'column', md: 'row' },
alignItems: 'center',
justifyContent: 'center',
}}
>
<Button>Click me</Button>
</Box>
This may sound counter-intuitive but what worked for my case (slightly different than yours) was to use the fullWidth attribute in the Button element.
Here is my scenario (MUI v5):
<Grid container alignItems={'center'} >
<Grid item>
<Button fullWidth variant='contained' >Click Me!</Button>
</Grid>
</Grid>
wrap element in this center
.center{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
}
I made a single page app in react using ant design. I made the navbar on top fixed, now when scrolling the cards in the content are floating over the navbar.
Top menu/navbar code
import React,{Component} from 'react'
import {Layout, Menu, Row, Col, Icon} from 'antd'
import Logo from './Glogo.png'
const {Header}=Layout
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
export default class TopMenu extends Component{
render(){
return(
<Header style={{position: 'fixed', width: '100%' }}>
<img src={Logo} style={{height:"40px", width:"140px",
float:"left", marginTop:"10px"}}alt="Logo"/>
<Menu
theme="dark"
mode="horizontal"
style={{ lineHeight: '64px' }}
>
</Menu>
</Header>
)
}
}
In header i declared the position as fixed.
Content code:
import React, {Component} from 'react';
import {Layout, Card, Row, Col, List} from 'antd';
const {Content} = Layout;
class Dashboard extends Component{
constructor(props){
super();
this.state={
session_id:[
{
event:"underline",
timestamp:"10:30",
observation:["magnetic effect","flemings right hand rule","magnetic effect","flemings right hand rule","magnetic effect","flemings right hand rule","magnetic effect","flemings right hand rule","magnetic effect","flemings right hand rule"],
suggestions:["take a look at this concept", " watch this video"]
},
{
event:"underline",
time:"10:30",
observation:["magnetic effect","flemings right hand rule"],
suggestions:["take a look at this concept", " watch this video"]
},
{
event:"underline",
time:"10:30",
observation:["magnetic effect","flemings right hand rule"],
suggestions:["take a look at this concept", " watch this video"]
},
]
}
}
render(){
return(
<Content style={{ padding: '0 50px', marginTop: 64, minHeight: "calc(100vh - 128px)" }}>
<div style={{ background: '#fff', padding: 24, minHeight: 500, marginBottom:"30px" }}>
{this.state.session_id.map((val, i)=>
<Card key={i}hoverable style={{margin:"15px", boxShadow:"0 0 10px gray "}}>
<Row gutter={16}>
<Col xs={24} sm={24} md={8} lg={8} >
<Card title="Event" hoverable bordered={false}>
Name: {val.event}<br/>Time: {val.time}
</Card>
</Col>
<Col xs={24} sm={24} md={8} lg={8} >
<Card title="Observation" hoverable bordered={false}>
<List
size="small"
bordered
dataSource={val.observation}
renderItem={item => (<List.Item>{item}</List.Item>)}
/>
</Card>
</Col>
<Col xs={24} sm={24} md={8} lg={8} >
<Card title="Suggestions" hoverable bordered={false}>
<List
size="small"
bordered
dataSource={val.suggestions}
renderItem={item => (<List.Item>{item}</List.Item>)}
/>
</Card>
</Col>
</Row>
</Card>)}
</div>
</Content>
)
}
}
export default Dashboard;
The cards in the content are floating over the fixed header while the content itself is below the header.
I want the navbar to be on top of everthing else. What can i do.
May z-index will help you in your case.
<Header style={{position: 'fixed', width: '100%', zIndex: 100}}>