I am working on a website using React and Material UI library and I am done with the basic layout for the home page. However, right now it is a bit awkward since the home page does not take up the full screen, leaving some empty white space at the bottom. Does anyone know how to style my home page to make it take up the full screen? Many thanks in advance
Here is the code for my home page, Home.js
import React, { useState } from 'react';
import '../styling/Home.css';
import { constants } from '../styling/Constants';
import Header from '../components/Header';
import Footer from '../components/Footer';
import Searchbar from '../components/Searchbar';
import { StyledButton } from '../components/Button';
import BigCard from '../components/BigCard';
import SmallCard from '../components/SmallCard';
import Grid from '#material-ui/core/Grid';
import Paper from '#material-ui/core/Paper';
import { Container } from '#material-ui/core';
function Home() {
const style = {
'text-align': 'center'
}
const smallDivStyle = {
'display': 'flex',
'margin': '12px'
}
return (
<div style={style}>
<Searchbar />
{/* item xs, md changes width length of paper */}
<Container>
<Grid container>
<Grid item xs={12}>
<BigCard></BigCard>
</Grid>
</Grid>
</Container>
<br></br>
<Container>
<Grid container>
<Grid item md={4}>
<SmallCard></SmallCard>
</Grid>
<Grid item md={4}>
<SmallCard></SmallCard>
</Grid>
<Grid item md={4}>
<SmallCard></SmallCard>
</Grid>
</Grid>
</Container>
</div>
)
}
export default Home;
Whichever element is your background, target with the the css:
height: 100vh;
Which makes the element the same height as your screen. If you have a navbar at the top then you can do this:
height: calc(100vh - <height of navbar>px);
You can also use min-height and max-height CSS selectors to ensure that it never shrinks below a certain height (e.g. for mobile displays)
Your container needs maxWidth={false} on it. The top most container.
Related
Getting class as undefined for img tag in react.js
This is the component Header.jsx,
Here is the Header.jsx I'm using <img>, but the CSS properties are not not being implemented in the image, and I'm getting error as class=undefined
import React from 'react';
import classes from './header.css';
import { Box,Grid, Typography} from '#mui/material';
const Header = () => {
return (
<>
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={3}>
<Grid item xs>
<img src='./images/logo.svg' className={`${classes.header__logo}`} alt='Logo'/>
</Grid>
<Grid item xs={6}>
<Typography>gbr</Typography>
</Grid>
<Grid item xs>
<Typography>gbr</Typography>
</Grid>
</Grid>
</Box>
</>
)
}
export default Header
This is the css file for the header
/* header.css */
.header__logo{
height: 20px;
width: 50px;
}
In the console I'm getting this error, class="undefined"
<img src="./images/logo.svg" class="undefined" alt="Logo">
Just do like that:Basic Concept
import React from 'react';
import './header.css';
import { Box,Grid, Typography} from '#mui/material';
const Header = () => {
return (
<>
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={3}>
<Grid item xs>
<img src='./images/logo.svg' className="header__logo" alt='Logo'/>
</Grid>
<Grid item xs={6}>
<Typography>gbr</Typography>
</Grid>
<Grid item xs>
<Typography>gbr</Typography>
</Grid>
</Grid>
</Box>
</>
)
}
export default Header
When im doing this naming convention I make sure there's a parent tag with the classname you're trying to extend, in this case "header", also helps if your using SCSS with this, try something like this:
import React from 'react';
import classes from './header.scss';
import { Box,Grid, Typography} from '#mui/material';
const Header = () => {
return (
<div className={`${classes.header}`>
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={3}>
<Grid item xs>
<img src='./images/logo.svg' className={`${classes.header__logo}`} alt='Logo'/>
</Grid>
<Grid item xs={6}>
<Typography>gbr</Typography>
</Grid>
<Grid item xs>
<Typography>gbr</Typography>
</Grid>
</Grid>
</Box>
</>
)
}
export default Header
Inside your './header.scss'
.header {
// css style for header class
&__logo {
// css style code for logo class
}
}
I find, it returns undefined because it wasn't properly placed in the correct spot within your style sheet. Your react code looks good just missing a few things.
I am working with Material UI and I have 2 grid item. One an image carousel and the other a side menu.
THe side menu would contain more items which at some point stretches longer than the image carousel.
I dont want it to be so. I want this such that when the sidebar always maintains the height of the image carousel, despite the size of the screen. since it is responsive and the height of the carousel reduces based on screen size. WHen this happens, i want the height of the sidebar to reduce as well and align with the carousel size.
THis is the grid
<Grid container spacing={1}>
<Hidden mdDown>
<Grid item xs={2} sm={2} md={3} lg={2}>
<SearchNav />
</Grid>
</Hidden>
<Grid item xs={12} md={9} lg={10}>
<TopCarousel />
</Grid>
</Grid>
The Top Carousel is this:
import { Carousel } from 'react-responsive-carousel'
import Banner1 from '../img/banner1.jpg'
import Banner2 from '../img/banner2.jpg'
import Banner3 from '../img/banner3.jpg'
import Banner4 from '../img/banner4.jpg'
const TopCarousel = () => {
return (
<Carousel autoPlay infiniteLoop>
<div>
<img src={Banner1} alt='banner' />
</div>
<div>
<img src={Banner2} alt='banner' />
</div>
<div>
<img src={Banner3} alt='banner' />
</div>
<div>
<img src={Banner4} alt='banner' />
</div>
</Carousel>
)
}
export default TopCarousel
This is for the sidebar
import {
Divider,
MenuList,
MenuItem,
Typography,
Paper,
} from '#mui/material'
import React, { useState, useEffect } from 'react'
import { getAllCategories } from '../../apis'
const SearchNav = () => {
const [categories, setCategories] = useState([])
useEffect(() => {
loadCategories()
}, [])
// Load All Categories
const loadCategories = async () => {
const res = await getAllCategories()
setCategories(res.category)
}
return (
<Paper>
<MenuList>
<MenuItem>
<Typography variant='h6' component='body'>
ALL CATEGORIES
</Typography>
</MenuItem>
<Divider />
{categories &&
categories.map((category) => (
<MenuItem key={category._id} sx={{ pl: 4 }}>
<Typography>{category.name}</Typography>
</MenuItem>
))}
</MenuList>
</Paper>
)
}
export default SearchNav
My category in the sidebar are over 50 items. so i want it to inherit the width of the carousel and become scrollable
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
I have 2 divs contain highchart components, and they are wrapped in each grid separately. I have put a reference on the second div for ReactToPrint to print this div only.
When I maximize the browser, the print preview shows the image cannot fully fit in (refer to below Max window image) . However, when I reduce the browser size, the print preview shows a wide left margin (refer to below Narrow window image).
How can I print that div with full width regardless the size of browser on any page size e.g. A4 size, A3 size, etc?
Codes:
import React, { useRef } from 'react'
import ReactToPrint from 'react-to-print';
import HighChartTemp from './HighChartTemp';
import Grid from '#material-ui/core/Grid';
import Button from '#material-ui/core/Button'
import Box from "#material-ui/core/Box";
import PrintIcon from '#material-ui/icons/Print';
function PrintTest() {
const printRef = useRef();
return (
<div>
<Grid container spacing={3}>
<Grid item xs={12} sm={6}>
<Box borderRadius={16} boxShadow={3} >
<div><HighChartTemp type='bar' />
</div>
</Box>
</Grid>
<Grid item xs={12} sm={6}>
<Box borderRadius={16} boxShadow={3} >
<div id="page" ref={printRef}>
<HighChartTemp type='column' /> {/* print this chart only */}
</div>
</Box>
</Grid>
</Grid>
<Button>
<ReactToPrint
trigger={() => <PrintIcon fontSize="large" style={{ color: 'blue' }} />}
content={() => printRef.current}
pageStyle="#page { margin-top: 100px; } "
/>
</Button>
</div>
)
}
export default PrintTest
Prior to print
Max window:
Narrow window:
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/