We Keep Coding

Reducing the size of website increases the width

I have YouTube-style header like css, when I reduce the size of my website, the width of my YouTube-style header increases and my icons extend beyond the boundaries of the site, but when trying same thing with https://m.youtube.com/
it does not increase its width no matter how small you make it, any idea on this ?
i dont want to use overflow:hidden; because when website size is reduced then it cuts out my icons, icons should still be visible like in youtube mobile version.
try it here:
https://codesandbox.io/s/material-ui-icon-avatar-example-forked-exzhzj?file=/src/app.css&resolutionWidth=153&resolutionHeight=671
code:
import React from "react";
import ReactDOM from "react-dom";
import { makeStyles } from "#material-ui/core/styles";
import Avatar from "#material-ui/core/Avatar";
import NotificationsIcon from "#material-ui/icons/Notifications";
import MenuIcon from "#material-ui/icons/Menu";
import SearchIcon from "#material-ui/icons/Search";
import VideoCallIcon from "#material-ui/icons/VideoCall";
import AppsIcon from "#material-ui/icons/Apps";
import "./app.css";
export default function EmailAvatar() {
return (
<div className="box-container">
<div className="header">
<div className="header__left">
<MenuIcon />
{/* <img
className="header__logo"
src="https://upload.wikimedia.org/wikipedia/commons/e/e1/Logo_of_YouTube_%282015-2017%29.svg"
alt=""
/> */}
</div>
<div className="header__input">
<input placeholder="Search" type="text" />
</div>
<div className="header__icons">
<span title="Create">
<VideoCallIcon className="header__icon" />
</span>
<span>
<AppsIcon className="header__icon" />
</span>
<span title="Notifications">
{" "}
<NotificationsIcon className="header__icon" />
</span>
<Avatar
alt="Remy Sharp"
src="https://www.shutterstock.com/image-photo/skeptic-surprised-cat-thinking-dont-260nw-1905929728.jpg"
/>
</div>
</div>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<EmailAvatar />, rootElement);
img of problem:
youtube mobile:

overflow hidden add
.header {
overflow: hidden;
}

Your header is inside another container, and has a sticky position
change this for your header class :
.header {
width: 100%;
position: fixed;
top: 0;
left: 0;
}

Make page in React take up the full screen

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.

(React) Sliding/Sticky navbar hidden behind images?

My sliding navbar gets sucked in at the top and when i scroll down it is behind the images.
I want it to be in front of the images like what this website does https://www.w3schools.com/howto/howto_js_navbar_sticky.asp (yes i tried following their code exactly but then i get TypeError: Navbar is null) (So i was trying to code a different version based off of theirs)
my code
Header.js
import React, { Fragment } from 'react'
import { Navbar, Nav } from 'react-bootstrap'
import './Header.scss'
const alwaysOptions = (
<Fragment>
<Nav.Link href="#/" className="btn btn-light">Home</Nav.Link>
<Nav.Link href="#/Anime-list" className="btn btn-warning">Anime List</Nav.Link>
<Nav.Link href="https://notARealSite.com" target='_blank' rel="noopener noreferrer" className="btn btn-danger">Cartoons</Nav.Link>
</Fragment>
)
const Header = ({ user }) => (
<Navbar bg="dark" expand="md" id="navbar">
<Navbar.Brand href="#">
<h3 className="navbarTitle">Anime Stream</h3>
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
{ alwaysOptions }
</Nav>
</Navbar.Collapse>
</Navbar>
)
window.onscroll = function () { scrollFunction() }
const scrollFunction = () => {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById('navbar').style.top = '0'
} else {
document.getElementById('navbar').style.top = '-50px'
}
}
export default Header
Header.scss
#import "~bootstrap/scss/bootstrap";
#navbar {
position: fixed;
top: -50px;
width: 100%;
transition: top 0.3s;
}
output: https://prnt.sc/10vcl0j (the navbar is sucked in at the top of the page)
2nd output (after scrolling down): https://prnt.sc/10vcm7e (the navbar is behind the images)

I suspect that if you look at the CSS attached to those images, you'll find that they have a z-index assigned. Try setting your navbar's z-index higher than theirs.
samuei

React: How ReactToPrint can print dynamic width fit on any page size

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:

Rotate/Transform Material-UI List

I'm trying to use React Material-UI and the Drawer API to build a navigation sidebar with the buttons rotated (a stacked list with the buttons turned 90 degrees). I only have a few buttons I'd like to use so I'm trying to do this with the permanent Drawer setup. I was wondering if anyone had any examples or solutions to this. Presently I have this in a CSS file:
.horiz-list {
display: inline-block;
transform: rotate(270deg);
height: 80px;
width: 50px;
}
and this as an example in my sidebar code:
const button = {
text: "Photos",
onClick: () => history.push('/photos')
};
<Drawer
className={classes.drawer}
variant="permanent"
classes={{
paper: classes.drawerPaper,
}}
>
<Toolbar />
<div className={classes.drawerContainer}>
<Divider />
<List>
<ListItem button key={button.text} onClick={button.onClick}>
<ListItemText primary={button.text} className="horiz-list" />
</ListItem>
</List>
<Divider />
</div>
</Drawer>
Right now, some of the labels end up off screen and with the slider at the bottom. Thanks in advance!