I want the Box content on the right (Textfields, etc.) as shown in the image below to be always centered even in responsive,
I tried justifyContent="center" in <Box > but nothing happened it didn't move at all also tried justifyContent="center" in <Stack > also nothing happened, I'm not sure if I missed something or there is another way to do it!!
Some help would be appreciated.
The code:
return (
<div className="login">
<Box>
<Stack direction="row"
// spacing={1} >
{/* FIRST BOX ON THE LEFT WITH THE IMAGE & LOGO */}
<Box sx={{
width: "40%",
height: "100%",
backgroundColor: '#3AAFA9',
display: {xs: "none", md: "none", sm: "none", lg:"block"},
}}
>
{/* TO HOLD IMAGE, LOGO & DISCRIPTION */}
<Stack direction="column"
spacing={-2}
sx={{ display: 'block' }}
py={10}
ml={7}>
{/* STUFF */}
</Stack>
</Box>
{/* HERE WHERE THE PROBLEM IS*/}
<Box component="div"
// sx= {{
// padding:{ xs: 2, sm: 4, md: 4, lg:10 },
// }}
justifyContent= "center">
<Stack
direction='column'
width="100%"
justifyContent="flex-start"
// sx={{ ml: 10 }}
>
<Typography variant="h5"
gutterBottom
component="span"
style={{ fontWeight: 600, textAlign: 'left' }}
>
Login to
</Typography>
<Divider style={{width:'100%'}}>
Or
</Divider>
{/* LOGIN FORM */}
<form className="loginForm" onSubmit={handleSubmit}>
</form>
{/* LOGIN FORM ENDS */}
</Stack>
</Box>
</Stack>
</Box>
</div>
)
The Box-Component of Mui dont have a prop justifyContent.
You have to declare it inside youre sx.
sx={{
display: "flex",
justifyContent: "space-between",
width: "100%",
//...
}}
The width is just to say the box it have to use the hole space.
Cheers
Related
I have a web app that uses a material ui drawer for smaller screens. The buttons on the top navigation pane work as expected( take the user to a section of the page ) but the ones in the drawer(created for responsiveness) don't. I am using react 18.2.0, typescript 4.9.4 and material ui 5.11.6
<AppBar>
<Toolbar sx={{
display: "flex",
justifyContent : "flex-end",
bgcolor : "whitesmoke",
color : "black"
}}>
<Stack component={"span"} spacing={.5} direction="row" sx={{
color: "inherit",
margin: "0px 15px 0px 0px",
position : "absolute",
left: 0
}}>
<Typography sx={{
fontFamily: "'Pacifico'",
fontSize : "1.2rem"
}}>{"< George Kimari />"}</Typography>
</Stack>
<Stack spacing={2} direction="row" component={"span"} sx={{
display : {
xs : "none",
sm: "flex"
},
justifySelf: "flex-end"
}}>
/*The button below works*/
<Button color={"inherit"} sx={ButtonTheme} href="#about">About me</Button>
</Stack>
<IconButton onClick={() => setDrawerOpen(true)}>
<Menu sx={{
color: "inherit",
display : {
xs : "flex",
sm : "none",
md : "none"
}
}}/>
</IconButton>
<Drawer open={drawerOpen} onClose={() => setDrawerOpen(false) } anchor="right">
/*The link and button below don't work
<Stack width={"200px"} sx={{
height: "70px",
display : "grid",
placeContent : "center"
}}><Link href={"#about"}component={"button"}>About</Link></Stack>
<Divider />
<Stack width={"200px"} sx={{
height: "70px",
display : "grid",
placeContent : "center"
}}><Button sx={{
width : "200px",
height : "50px"
}} color={"inherit"} href="#projects">Projects</Button></Stack>
</Drawer>
</Toolbar>
</AppBar>
)
}
I have tried replacing them with links to no avail.
I want to implement flex system from material-ui using the Stack component Im faced with a issue. The other half of my screen is displaying another component or blank space and I dont know how to get rid of it.
I'm using the Stack component from material-ui and the normal html iframe tag to build a code editor. Any Idea how I can fix this using Stack?
Screenshot of UI:
Here is my code:
index.js
<Stack sx={{ bgcolor: 'white', pt: 1 }}>
<TabContext value={value} >
<Box sx={{ borderBottom: 1, borderColor: 'divider', bgcolor: 'white' }}>
<TabList onChange={handleChange} >
<Tab label="HTML" value="1" />
<Tab label="CSS" value="2" />
<Tab label="JS" value="3" />
<Tab label="Output" value="4" sx={{ display: { xs: 'block', md: 'none' }, mt: 1 }} />
</TabList>
</Box>
{value === '4' ?
<Stack sx={{ height: 'calc(100vh - 201px)' }}>
<iframe title="result"
sandbox="allow-scripts"
frameBorder="0"
width="100%"
srcDoc={iframeDisplay}
/>
</Stack>
:
<Stack direction="row" sx={{ width: '100%', height: '100%', position: 'relative'}}>
<Stack sx={{ width: { xs: '100%', md: '50%' }, bgcolor: "white" }}>
<TabPanel value={value} sx={{ p: 0 }}>
<CodeMirror
value={codeEditor.value}
height={CODE_EDITOR_PROPS.height}
theme={CODE_EDITOR_PROPS.theme}
extensions={codeEditor.extensions}
onChange={onChange}
/>
</TabPanel>
</Stack>
<Box sx={{ display: { xs: 'none', md:'flex' }, height: 'calc(100vh - 201px)', width: 'calc(50% - 1024px)'}}>
<iframe
title="result"
frameBorder="0"
height="calc(100vh - 201px)"
srcDoc={iframeDisplay}
/>
</Box>
</Stack>}
</TabContext>
</Stack>
How do I put the clear icon on the card on the top right side of the card overlapping it.
What is the proper way to do it?
CLICK HERE = CODESANDBOX
<Paper
sx={{
padding: "1em",
background: "black"
}}
>
<IconButton color="error" aria-label="add to shopping cart">
<ClearIcon />
</IconButton>
<Grid
component="div"
container
spacing={2}
sx={{
marginBottom: "1em"
}}
>
<Grid component="div" item sm={12}>
<Alert>SUCCESS</Alert>
</Grid>
</Grid>
</Paper>;
Try this:
<Paper
sx={{
padding: "1em",
background: "black",
position: "relative"
}}
>
<IconButton
sx={{
position: "absolute",
top: "-15px",
right: "-15px",
// not necessary, just added this coz it looks weird
background: "white"
}}
color="error"
aria-label="add to shopping cart"
>
<ClearIcon />
</IconButton>
<Grid
component="div"
container
spacing={2}
sx={{
marginBottom: "1em"
}}
>
<Grid component="div" item sm={12}>
<Alert>SUCCESS</Alert>
</Grid>
</Grid>
</Paper>
What I did is simple, make the Paper position relative, then make the icon button absolute.
This way the button will follow whenever you move/animate the Paper.
The outcome would be something like this: https://wphyd.csb.app/
I have different places that use the same input component.
Below are the input component:
const stationSelection = (stationName) => {
return (
<Paper
component="form"
elevation={5}
sx={{
m: '10px 0 30px 5px',
p: '2px 4px',
display: 'flex',
alignItems: 'center',
width: 300,
}}
>
//HERE
<InputBase
sx={{ ml: 1, flex: 1 }}
placeholder="Please select a station."
value={stationName}
onChange={ /*how to get the data each of the input*/ }
/>
<Divider sx={{ height: 28, m: 0.5 }} orientation="vertical" />
<IconButton
color="primary"
sx={{ p: '10px' }}
aria-label="directions"
>
<ArrowDropDownCircleOutlinedIcon />
</IconButton>
</Paper>
)
}
In my react app, I will use it two times for different input.
<CardContent className="default-font">
<Box sx={{ mb: 10 }}>
<Box className="bold">DEPARTURE STATION</Box>
{stationSelection(departStation)} //HERE
<Box className="center">
<Box className="bold" sx={{ flexGrow: 1 }}>
ARRIVAL STATION
</Box>
<IconButton
color="primary"
sx={{ p: '5px', m: '-10px 0 -10px 0' }}
>
<ImportExportIcon />
</IconButton>
</Box>
{stationSelection(arriveStation)} //HERE
</Box>
{ticketDetails()}
</CardContent>
Because I use it two times by using the different variables into the same component, it makes it difficult for me to found out a way to get the data out from the component.
Here are my useState in case you need that.
const [departStation, setDepartStation] = useState('');
const [arriveStation, setArriveStation] = useState('');
Basically, I need to get that two user input.
Full code link.
First, you functional component should start with a capital letter, so change your declaration to:
const StationSelection = ...
Second, in order to edit the state in your component, you should also pass the setter method, and change it in the onChange function:
const StationSelection = ({ stationName, setStationName }) => {
const handleStationChange = (e) => {
setStationName(e.target.value)
}
return (
<Paper
component="form"
elevation={5}
sx={{
m: '10px 0 30px 5px',
p: '2px 4px',
display: 'flex',
alignItems: 'center',
width: 300,
}}
>
//HERE
<InputBase
sx={{ ml: 1, flex: 1 }}
placeholder="Please select a station."
value={stationName}
onChange={handleStationChange}
/>
<Divider sx={{ height: 28, m: 0.5 }} orientation="vertical" />
<IconButton
color="primary"
sx={{ p: '10px' }}
aria-label="directions"
>
<ArrowDropDownCircleOutlinedIcon />
</IconButton>
</Paper>
)
}
Finally, change your main component like this
<CardContent className="default-font">
<Box sx={{ mb: 10 }}>
<Box className="bold">DEPARTURE STATION</Box>
<StationSelection stationName={departStation} setStationName={setDepartStation} />
<Box className="center">
<Box className="bold" sx={{ flexGrow: 1 }}>
ARRIVAL STATION
</Box>
<IconButton
color="primary"
sx={{ p: '5px', m: '-10px 0 -10px 0' }}
>
<ImportExportIcon />
</IconButton>
</Box>
<StationSelection stationName={arriveStation} setStationName={setArriveStation} />
</Box>
{ticketDetails()}
</CardContent>
I have a project in order to organize tasks within companies, and I have a group of workspace that I must display, but when viewing the card changes the shape of the card when the screen is minimized and only when the name of the workspace consists of two words.
As it is clear in the picture, I have a workspace whose name is Heba Youssef, and we notice the change in the shape of the card style when the screen is minimized.
How can I solve this problem?
code.tsx:
interface WorkspaceCardProps {
workspace: Workspace;
}
let theme = createMuiTheme();
theme = responsiveFontSizes(theme);
const WorkspaceCard: FC<WorkspaceCardProps> = (props) => {
const { workspace } = props;
const user = useAuthModule((state) => state.user.user);
console.log('user workspace: ', workspace)
console.log('user' , user.name)
const fileSelectedHandler = event => {
console.log(event)
}
const navigation = useNavigate();
const fileUploadHandler = ()=>{
}
return (
<Box
sx={{
display: 'flex',
flexDirection: 'column',
p: 3
}}
>
<Card
style={{maxWidth: "24rem"}}
sx={{py: '20px'}}>
<Box
sx={{
pl: 3,
pr:3,
pb:3,
pt:2
}}
>
<Box
sx={{
alignItems: 'center',
display: 'flex',
}}
>
<Avatar
onClick={fileUploadHandler}
onChange={fileSelectedHandler}
style={{height: "5.6rem", width: "5.6rem"}}
alt="Author"
src="https://t4.ftcdnA25Jjm2q.jpg"
// src={workspace.author.avatar}
>
</Avatar>
<Box sx={{ml: 2}}>
<Link
color="textPrimary"
component={RouterLink}
to="#"
variant="h6"
style={{textAlign: "center", fontSize: "1.9rem",
paddingLeft: "0.8rem"}}
>
{workspace.name}
{/*Slark*/}
</Link>
<Typography
color="textSecondary"
variant="body2"
style={{textAlign: "center", paddingLeft: "0.8rem"}}
>
by
{' '}
<Link
color="textPrimary"
component={RouterLink}
to="#"
variant="subtitle2"
>
{user.name}
</Link>
</Typography>
</Box>
</Box>
</Box>
<Divider />
<Box
sx={{
alignItems: 'center',
display: 'flex',
pl: 2,
pr: 3,
pt:2
}}
>
<Box
sx={{
alignItems: 'center',
display: 'flex',
ml: 2
}}
>
<UsersIcon fontSize="small"/>
<Typography
color="textSecondary"
sx={{ml: 1}}
variant="subtitle2"
>
{/*{workspace.membersCount}*/}
4
</Typography>
</Box>
<Box sx={{
ml: 2
}}
>
<Button>
<a href={`/workspace-settings/settings/${workspace._id}`} >
<ViewComfyRoundedIcon style={{fontSize: 30}}/>
</a>
</Button>
</Box>
</Box>
</Card>
</Box>
);
};
WorkspaceCard.propTypes = {
// #ts-ignore
workspace: PropTypes.object.isRequired
};
export default WorkspaceCard;
I believe you are using the Grid component. You should specify a higher value for either xs, sm, md, ... You have to guess how long a workspace name typically is and set the value(s) accordingly.
The other way to you may consider is to add noWrap the following:
<Link
color="textPrimary"
component={RouterLink}
to="#"
variant="h6"
style={{
textAlign: "center", fontSize: "1.9rem",
paddingLeft: "0.8rem"
}}
noWrap
>
{workspace.name}
</Link>
Although I'm not sure whether it is a good UI design, given you have left little space to display text that is potentially very long.