I'm trying to align these buttons with the divider, I used flex in the button component but I couldn't get a significant change.
image
my code:
Button Component
<Container style={{display: "flex", alignContent: "space-between"}}>
{socialIcons.map((social, index) => {
return (
<Link key={index} target={"_blank"} href={social.link}>
<ActionIcon size="xl" radius="xl" variant="default">
{social.icon}
</ActionIcon>
</Link>
);
})}
Main :
<div>
<Divider
style={{maxWidth: "80%",}}
labelPosition="center"
label="ou "
size="xs"
my="xs"
/>
<SocialFollow></SocialFollow>
</div>
Related
I have an imagelist and I want to render buttons below the images
This is my code so far;
export const Media = (stuff) => {
const { medias } = stuff;
console.log(medias);
const classes = useStyles();
return (
<div className={classes.root}>
<ImageList className={classes.imageList} gap={2} cols={3}>
{medias.map((media) => (
<ImageListItem key={media.cover_photo_url}>
<img
src={media.cover_photo_url}
className={classes.image}
style={{ borderRadius: "15px" }}
/>
<PlayArrowIcon className={classes.overlay} />
<ImageListItemBar subtitle={<LinkIcon></LinkIcon>} position="below"/>
</ImageListItem>
))}
</ImageList>
{medias.map((item) => (
<Buttons item={item} />
))}
</div>
);
};
I can display the buttons with the map function below however it doesnt scroll with the image that is relative with it horizontally
how can i make the buttons stick together with the images?
Thanks
you can try using <Box> like this
import Box from '#material-ui/core/Box';
<Box>
<ImageListItem key={media.cover_photo_url}>
<img
src={media.cover_photo_url}
className={classes.image}
style={{ borderRadius: "15px" }}
/>
<PlayArrowIcon className={classes.overlay} />
<ImageListItemBar subtitle={<LinkIcon></LinkIcon>} position="below"/>
</ImageListItem>
<Buttons item={item} />
</Box>
Just Remove Second loop for buttons and bring button tag in first loop and wrapper ImageListItem and Button with a div
Replace this,
{medias.map((media) => (
<ImageListItem key={media.cover_photo_url}>
<img
src={media.cover_photo_url}
className={classes.image}
style={{ borderRadius: "15px" }}
/>
<PlayArrowIcon className={classes.overlay} />
<ImageListItemBar subtitle={<LinkIcon></LinkIcon>} position="below"/>
</ImageListItem>
))}
</ImageList>
{medias.map((item) => (
<Buttons item={item} />
))}
With this,
{medias.map((media) => (
<Box>
<ImageListItem key={media.cover_photo_url}>
<img
src={media.cover_photo_url}
className={classes.image}
style={{ borderRadius: "15px" }}
/>
<PlayArrowIcon className={classes.overlay} />
<ImageListItemBar subtitle={<LinkIcon></LinkIcon>} position="below"/>
</ImageListItem>
<Buttons item={media} />
</Box>
))}
You can Import the Box by using this
import Box from '#material-ui/core/Box';
I'm trying to display a navbar on top of react window list. I'm using react-window and react-virtualized-auto-sizer. The problem is that when I add the navbar outside the AutoSizer it creates another scroll bar. sandbox. How could I position the navbar ontop of the list without another scroll bar being created?
Code:
const Row = ({ index, style }) => (
<div style={style}>Row {index}</div>
);
const Homepage = () => (<>
<div style={{ width: "100%", height: "100vh", overFlow: "hidden"}}>
<Navbar /> // this causes a second scroll bar
<AutoSizer>
{({ width, height }) => (
<>
<List
height={height}
itemCount={1000}
itemSize={35}
width={width}
>
{Row}
</List>
</>
)}
</AutoSizer>
</div>
</>
);
Change your dom architecture so your header is outside the AutoSizer
For example:
const App = () => (
<div style={{ width: "100%", height: "100vh" }}>
<div style={{ height: "10vh", backgroundColor: "lightgrey" }}>
header here
</div>
<div style={{ height: "80vh" }}>
<AutoSizer>
{({ width, height }) => (
<>
<List height={height} itemCount={1000} itemSize={35} width={width}>
{Tester}
</List>
</>
)}
</AutoSizer>
</div>
<div style={{ height: "10vh", backgroundColor: "lightgrey" }}>
footer here
</div>
</div>
);
Demo
In you style.css file you could add
body {
overflow: hidden;
}
it s not the most elegant solution but I guess it works.
I'm trying to achieve like this in the picture below. Right now, my image is on the top while the text is below. I wanted to achieve like the text is just on the right side of the image.
Pls check this codesandbox link CLICK HERE
CODE
const drawer = (
<div>
<h2 className={classes.headerTitle}>Login</h2>
<Divider />
<div className={classes.headerIcon}>
<AccountCircleIcon fontSize="large" />
</div>
<h5 className={classes.headerName}>Bake</h5>
<p className={classes.headerRole}>User</p>
<Divider />
</div>
);
Adding display: "flex" to children doesn't really do much. What I did was I added a wrapper class around you icon, name and role, with the display: "flex", flexDirection:"row" justifyContent: "center" and alignItems:"center" properties. What the wrapper then does is that it puts all the divs "under" it in a row, like:
<div className="classes.wrapper">
<div>This one is to the left</div>
<div>This one is to the right</div>
</div>
However, if I for example put another 2 divs under the one to the right, they will stack on top of each other, because the flexDirection property is set to row for all children under the wrapper, but not for their children.
<div className="classes.wrapper">
<div>This one is to the left</div>
<div>
<div>This one will be to the right on top</div>
<div>This one will be to the right under</div>
</div>
</div>
I also removed some other stuff, but here's the code:
import React from "react";
import { makeStyles } from "#material-ui/styles";
import Divider from "#material-ui/core/Divider";
import Drawer from "#material-ui/core/Drawer";
import Hidden from "#material-ui/core/Hidden";
import AccountCircleIcon from "#material-ui/icons/AccountCircle";
import "./styles.css";
const useStyles = makeStyles(theme => ({
wrapper: {
display: "flex",
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
margin: "0.5rem"
},
innerWrapper: {
display: "flex",
flexDirection: "column",
alignItems: "baseline",
marginLeft: "0.5rem"
},
headerTitle: {
fontSize: "1.3rem",
cursor: "pointer"
},
headerName: {
margin: "0",
fontStyle: "bold",
fontSize: "1rem"
},
headerRole: {
margin: "0",
fontSize: "0.7rem"
},
iconButtons: {
marginLeft: "auto"
}
}));
export default function LoginForm() {
const classes = useStyles();
const drawer = (
<>
<h2 className={classes.headerTitle}>Login</h2>
<Divider />
<div className={classes.wrapper}>
{" "}
<div className={classes.headerIcon}>
{" "}
<AccountCircleIcon fontSize="large" />
</div>
<div className={classes.innerWrapper}>
<h5 className={classes.headerName}>Bake</h5>
<p className={classes.headerRole}>User</p>
</div>
<Divider />
</div>
</>
);
return (
<nav className={classes.drawer}>
<Hidden lgUp implementation="css">
<Drawer
variant="temporary"
anchor={"left"}
classes={{
paper: classes.drawerPaper
}}
ModalProps={{
keepMounted: true
}}
>
{drawer}
</Drawer>
</Hidden>
<Hidden implementation="css">
<Drawer
classes={{
paper: classes.drawerPaper
}}
variant="permanent"
open
>
{drawer}
</Drawer>
</Hidden>
</nav>
);
}
For more information on how to use flexbox in CSS, check out this guide.
Here is how I have done it. I have adjusted the text on the right side of the icon.
You can do further styling:
import React from "react";
import { makeStyles } from "#material-ui/styles";
import Divider from "#material-ui/core/Divider";
import Drawer from "#material-ui/core/Drawer";
import Hidden from "#material-ui/core/Hidden";
import AccountCircleIcon from "#material-ui/icons/AccountCircle";
import "./styles.css";
const headerStyles = {
display: "flex",
justifyContent: "center"
};
const useStyles = makeStyles(theme => ({
root: {
display: "flex"
},
headerTitle: {
...headerStyles,
fontSize: "1.3rem",
cursor: "pointer"
},
headerIcon: {
...headerStyles,
marginTop: "1rem"
},
headerName: {
...headerStyles,
marginTop: "0.2rem"
},
headerRole: {
...headerStyles,
marginTop: "-0.8rem",
marginBottom: "1rem"
},
iconButtons: {
marginLeft: "auto"
},
userName: {
display: "flex",
flexDirection: "row"
}
}));
export default function LoginForm() {
const classes = useStyles();
const drawer = (
<div>
<h2 className={classes.headerTitle}>Login</h2>
<Divider />
<div className={classes.userName}>
<div className={classes.headerIcon}>
<AccountCircleIcon fontSize="large" />
</div>
<div>
<h5 className={classes.headerName}>Bake</h5>
<p className={classes.headerRole}>User</p>
</div>
</div>
<Divider />
</div>
);
return (
<nav className={classes.drawer}>
<Hidden lgUp implementation="css">
<Drawer
variant="temporary"
anchor={"left"}
classes={{
paper: classes.drawerPaper
}}
ModalProps={{
keepMounted: true
}}
>
{drawer}
</Drawer>
</Hidden>
<Hidden implementation="css">
<Drawer
classes={{
paper: classes.drawerPaper
}}
variant="permanent"
open
>
{drawer}
</Drawer>
</Hidden>
</nav>
);
}
When I call my SideBar component in App.js it appears on top of everything with the main page under it and I understand why it does this but I don't know how to get it so that the sidebar appears to the left of the screen with the main app component it right next to it.
Here is my code:
const AppRoute=({component:Component, layout:Layout,...rest}) => {
<Route {...rest} render = {props=> (
<Layout>
<Component {...props}/>
</Layout>
)}/>
)
const MainLayout = props =>(
<div>
<SideBar/>
{props.children}
<div>
class App extends Component {
render() {
return(
<BrowswerRouter>
<div>
<Switch>
<AppRoute path = "/dashboard" layout={MainLayout} component={Dashboard}/>
</Switch>
</div>
</BrowserRouter>
)
}
}
Any help is greatly appreciated!
const MainLayout = props =>(
<div style={{display: 'flex'}}>
<SideBar style={{flex: '1 auto'}} />
{props.children}
<div>
try this maybe
you could also apply float: left on both the sidebar, and the main content elements, giving the sidebar a fixed width
or you could try css grid:
const MainLayout = props =>(
<div style={{display: 'grid', gridTemplateColumns: '200px auto'}}>
<SideBar />
{props.children}
<div>
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}}>