Material-ui jss doesn't respect justify content - javascript

I have a react app and I am trying to use material-ui 1.0, with it's JSS solutions. It does not seem to respond to any alignment of justify properties. The code below I would expect to center justify, but it isn't happening. I have placed the code in every configuration I can think of but it is not working.
I feel like maybe something is misnamed but matrial-ui doesn't document it's jss solutions very well and this is my first time using this system to style an app.
// react
import React, { Component } from 'react';
import { withStyles } from 'material-ui/styles';
// vendor
import Grid from 'material-ui/Grid';
// source
import LoginPage from 'components/pages/auth-page';
import BasePage from 'components/pages/base';
const styles = theme => ({
root: {
display: "flex",
height: "100%",
[theme.breakpoints.down('sm')]: {
width: "100%",
},
[theme.breakpoints.up('md')]: {
width: "80%",
},
[theme.breakpoints.up('lg')]: {
width: "70%",
},
},
river: {
display: "flex",
marginTop: "75px",
flexGrow: 1,
justifyContent: "center",
alignItems: "center",
},
});
class Application extends Component {
constructor(props){
super(props);
}
render(){
const { classes } = this.props;
return(
<div id={"root"} className={classes.root}>
<Grid container className={classes.river}>
{this.state.authorized
? <BasePage />
: <LoginPage />
}
</Grid>
</div>
)
}
}
export default withStyles(styles)(Application);

You can try alignitem and justify provided by Grid it self:
try:
<div id={"root"} className={classes.root}>
<div className={classes.river}
<Grid
spacing={0}
direction="column"
alignItems="center"
justify="center"
>
<Grid item xs={3}>
<LoginPage />
</Grid>
</Grid>
</div>
</div>
please find that I have used xs={3} as responsive width for the login page. feel free to change those values.
hope this will help you

Related

Position Material-UI Drawer component under Appbar

I'm creating a single-page application (Material-UI based) with an AppBar (+ ToolBar) and a Drawer. At the moment, the Drawer overlaps the AppBar and under no circumstances can I get the Drawer to move down, so it is basically positioned right under the AppBar.
I tried adding some padding, but this does not do anything. I'm using makeStyles for styling of most of the components, and I am wondering if it is even possible to position the Drawer below the AppBar.
Is there any way to position the drawer below the AppBar?
I have a lot of code, but the makeStyle function is simple:
const useStyles = makeStyles((theme) => ({
root: {
display: 'flex',
},
appBar: {
zIndex: theme.zIndex.drawer + 1,
},
title: {
flexGrow: 1,
},
toolbar: {
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
padding: theme.spacing(0, 1),
...theme.mixins.toolbar,
},
content: {
flexGrow: 1,
padding: theme.spacing(3),
},
drawer: {
paddingTop: 30
},
}));
and the main component (that includes the Drawer:
<div className={classes.root}>
<AppBar position="absolute" >
<Toolbar>
<Typography component="h1" variant="h6" noWrap className={classes.title}>
x
</Typography>
<Switch checked={isDarkTheme} onChange={handleThemeSwitch}/>
<WbIncandescentIcon />
</Toolbar>
</AppBar>
<ServiceDrawer className={classes.drawer}
onOperationSelected={onOperationSelect} serviceList={services} onDrawerOpen={onDrawerOpen} onDrawerClose={onDrawerClose}>
</ServiceDrawer>
<main className={classes.content}>
<div className={classes.toolbar} />
{selectedOperation && <Operation operation={selectedOperation}/>}
</main>
</div>
You need to set the variant of the Drawer to permanent so that it does not create an overlay over the current page, and put it inside the current app layout. Because the Drawer position is fixed, you also have to set the AppBar to fixed so they're on the same stacking context, and the z-index will be applied correctly, to put it in code:
<Drawer variant="permanent"
<AppBar position="fixed"
And finally the zIndex itself
appBar: {
zIndex: theme.zIndex.drawer + 1
},
Reference
https://v4.mui.com/components/drawers/#clipped-under-the-app-bar

How do I get my material-ui cards to lineup horizontally in row direction?

I have been pulling my hair out trying to get these material-ui cards to go in a row direction with my grid - I have used these before and had no issues making them lineup in a row direction rather than in a column direction and my code is the same as I used before.
Please let me know what mistakes I have made or solutions you know of!
Just a side note the direction, wrap, justify and alignitems properties I added to the grid have made no difference at all.
Hero.js
import { Grid, makeStyles } from '#material-ui/core'
import React from 'react'
import MediaCard from './Card'
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
paper: {
padding: theme.spacing(2),
textAlign: 'center',
color: theme.palette.text.secondary,
},
}));
function Hero() {
const classes = useStyles();
return (
<div className="Hero">
<div className={classes.root}>
<Grid
Container spacing={2}
className="hero-section"
direction="row"
wrap="nowrap"
justify="center"
alignItems="center"
>
<Grid item
xs={6}
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<MediaCard className="hero-card" />
</Grid>
<Grid item
xs={6}
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<MediaCard className="hero-card" />
</Grid>
</Grid>
</div>
</div>
)
}
export default Hero

How to lock the position of close button with paper component of modal in material ui for responsive screen?

I had built a cards page where I'm rendering multiple cards on a page. On clicking each card a popup card renders aka modal component but my close button is not responsive to the card.
Here is an image. See the button is going the wrong position when I open it to inspect.
Here is my link to complete code at codesandbox.
imagePopup.js modal component with close button
import React from "react";
import { makeStyles } from "#material-ui/core";
import Modal from "#material-ui/core/Modal";
import Backdrop from "#material-ui/core/Backdrop";
import Fade from "#material-ui/core/Fade";
import ActionButton from "./ActionButton";
import { CloseOutlined } from "#material-ui/icons";
const useStyles = makeStyles((theme) => ({
modal: {
display: "flex",
alignItems: "center",
justifyContent: "center"
},
paper: {
backgroundColor: theme.palette.background.paper,
boxShadow: theme.shadows[5]
},
actionBtn: {
position: "absolute",
right: 555,
top: 85
}
}));
export default function ImagePopup(props) {
const classes = useStyles();
const { openModal, setOpenModal, handleOpen, handleClose, img } = props;
return (
<div>
<Modal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
className={classes.modal}
open={openModal}
onClose={handleClose}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 500
}}
>
<Fade in={openModal}>
<div>
<div className={classes.actionBtn}>
<ActionButton
// to edit icon functionality
color="secondary"
onClick={handleClose}
>
<CloseOutlined fontSize="small" />
</ActionButton>
</div>
<div className={classes.paper}>
<img src={img} height="500" />
</div>
</div>
</Fade>
</Modal>
</div>
);
}
Adjust your actionBtn bloc style like this:
actionBtn: {
position: "absolute",
marginLeft: 352,
marginTop: -5,
borderRadius: 0,
'& > button': {
background: "transparent" // If you want button to be transparent
}
}

How can I only show a screenshot of the first page of a pdf in a React page?

I'm trying to set up a dashboard that allows users to see a small preview of the first page of a pdf that they select with no other functionality available to them.
I tried simply embedding the pdf but that will allow users to scroll, zoom in and out, etc. I don't want the user to have this ability, they should only be able to see a screenshot of page 1.
This is what the file currently looks like:
import { makeStyles } from '#material-ui/core/styles';
import { default as Grid } from '#material-ui/core/Grid';
import { default as Paper } from '#material-ui/core/Paper';
import { default as Typography } from '#material-ui/core/Typography';
import { default as React } from 'react';
import Datatable from './components/datatable';
import { obj } from './components/theme';
// Used makeStyles to stylize the paper elements in the page
const useStyles = makeStyles(theme => ({
button: {
margin: theme.spacing(1),
},
formControl: {
margin: theme.spacing(1),
},
margin: {
margin: theme.spacing(1),
},
paper: {
padding: theme.spacing(3, 2),
},
paper2: {
padding: theme.spacing(3, 2),
},
root: {
flexGrow: 1,
},
}));
export const OrdersList: React.FC = () => {
const classes = useStyles(obj.theme);
return (
<div className={classes.root}>
<Grid container spacing={3}>
<Grid item xs={9}>
<br />
<Datatable />
</Grid>
<Grid item xs={3} >
<br />
<Paper className={classes.paper2}>
<Typography variant="h4" component="h3" gutterBottom>Lorem Ipsum</Typography>
<embed src="pdf_source" width="500" height="375" type="application/pdf"/>
</Paper>
<br />
<br />
<Paper className={classes.paper2}>
<Typography variant="h4" component="h3" gutterBottom>Lorem Ipsum</Typography>
<Typography variant="body1" component="h3" gutterBottom>Lorem Ipsum dolor sit</Typography>
</Paper>
</Grid>
</Grid>
</div>
);
};
You will need to read the pdf with JS to achieve that. I would recommend using pdf.js (https://github.com/mozilla/pdf.js) and the getPage method. after that, you can set it wherever you like. You can find it here: http://mozilla.github.io/pdf.js/examples/

Why would material-ui's AppBar just break its own css on a few page reloads?

I'll show you exactly what I mean here. (it's a short video demonstrating exactly how this problem is reproduced and the missing css elements)
I also have screenshots of before:
and after:
Via inspect element it's clear that important css elements just straight up disappear, and it doesn't make any sense why that would happen specifically after clicking on a link, coming back, and refreshing.
Has anyone run into a similar problem with material-ui before or think you might know why the css is breaking?
EDIT: console is logging errors only when the search bar is in the wacky position as such:
unfortunately, I'm still not quite sure what to make of it.
I'll also include my appbar component which uses #material-ui/core/styles' makeStyles CSS rendering. If you want the entire repository to play around with I can make it available as well.
import React from 'react';
import AppBar from '#material-ui/core/AppBar';
import Toolbar from '#material-ui/core/Toolbar';
import IconButton from '#material-ui/core/IconButton';
import Typography from '#material-ui/core/Typography';
import InputBase from '#material-ui/core/InputBase';
import { fade } from '#material-ui/core/styles/colorManipulator';
import { makeStyles } from '#material-ui/core/styles';
import MenuIcon from '#material-ui/icons/Menu';
import SearchIcon from '#material-ui/icons/Search';
import {connectSearchBox} from 'react-instantsearch-dom';
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
},
menuButton: {
marginRight: theme.spacing(2),
},
title: {
flexGrow: 1,
display: 'none',
[theme.breakpoints.up('sm')]: {
display: 'block',
},
},
search: {
position: 'relative',
borderRadius: theme.shape.borderRadius,
backgroundColor: fade(theme.palette.common.white, 0.15),
'&:hover': {
backgroundColor: fade(theme.palette.common.white, 0.25),
},
marginLeft: 0,
width: '100%',
[theme.breakpoints.up('sm')]: {
marginLeft: theme.spacing(1),
width: 'auto',
},
},
searchIcon: {
width: theme.spacing(7),
height: '100%',
position: 'absolute',
pointerEvents: 'none',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
inputRoot: {
color: 'inherit',
},
inputInput: {
padding: theme.spacing(1, 1, 1, 7),
transition: theme.transitions.create('width'),
width: '100%',
[theme.breakpoints.up('sm')]: {
width: 300,
'&:focus': {
width: 400,
},
},
}
}));
function SearchBox({currentRefinement, refine}){
const classes = useStyles();
return(
<InputBase
type="search"
value={currentRefinement}
onChange={event => refine(event.currentTarget.value)}
placeholder="Search by state, park name, keywords..."
classes = {{
root: classes.inputRoot,
input: classes.inputInput,
}}
/>
)
}
const CustomSearchBox = connectSearchBox(SearchBox);
function SearchAppBar() {
const classes = useStyles();
return (
<div className={classes.root}>
<AppBar position="static" color="primary">
<Toolbar>
<IconButton
edge="start"
className={classes.menuButton}
color="inherit"
aria-label="Open drawer"
>
<MenuIcon />
</IconButton>
<Typography className={classes.title} variant="h6" noWrap>
Title
</Typography>
<div className={classes.search}>
<div className={classes.searchIcon}>
<SearchIcon />
</div>
<CustomSearchBox/>
</div>
</Toolbar>
</AppBar>
</div>
);
}
export default SearchAppBar;

Categories