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.
Related
I am having a logo where I need to center align it and need to draw horizontal line below the logo and after that horizontal line I need to place some content and after the content again I need to draw horizontal line. Below that I need to have a button. I have placed the logo center but I couldn't bring the horizontal lines and images one below the other. Could any one help me to resolve this issue. Thanks in advance!
OutPut I need is :
LOGO
--------------------------------------------------
Some Content
--------------------------------------------------
BUTTON
But I am getting like below :
LOGO --------------------------------------------------
BUTTON
function ModalComp() {
//Modal state
const [show, setShow] = useState(false);
//handlemodal logic
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
const onLoginFormSubmit = (e) => {
e.preventDefault();
handleClose();
};
return (
<div>
<div className="content">
<img
src={BackGroundImage}
alt="none"
style={{
width: "20%",
}}
/>
</div>
<div
style={{
position: "relative",
alignItems: "center",
justifyContent: "center",
left: "-12%",
}}
>
<Button
variant="info"
class="text-center"
onClick={handleShow}
style={{ marginBottom: "1em" }}
>
Contact US
</Button>
</div>
<Modal show={show}>
<Modal.Header closeButton>
<Modal.Title>Contact Form</Modal.Title>
</Modal.Header>
<Modal.Body>
<ContactUs onSubmit={onLoginFormSubmit} />
</Modal.Body>
</Modal>
</div>
);
}
CSS:
.content {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
I finished the layout of the website I'm working on, and like how it looks...
But...when my friend opens it on her iPhone, it looks like this.
I can't figure out what's causing this. If I use Chrome Developer Tools and set it to a responsive mobile format, or iPhone X, it resizes properly. Can anyone help me figure out what I'm doing wrong here?
I also had a third person look at it who told me the video isn't playing. So I'm pretty lost, not sure what I'm doing wrong since I can't reproduce the issue myself.
Here is the link if anyone wants to check.
And this is the code for the header.
import React, { useState } from "react"
import styled from "styled-components"
import { Link } from "gatsby"
import logo_image from "../../static/logo_white_trans.png"
import title_image from "../../static/title.png"
const MenuIcon = //Removed
const MenuLinks = //Removed
const Header = () => {
const [nav, showNav] = useState(false)
return (
<div id='header' style={{ height: '100%', backgroundColor: 'black', display: 'grid', gridTemplateColumns: '20% 60% 20%' }}>
<div id='logo' style={{ width: '100%' }} >
<img alt='logo' src={logo_image} style={{ maxHeight: '15vh', maxWidth: '100%', width: 'auto !important' }} />
</div>
<div id='title' style={{ position: 'relative', margin: 'auto', textAlign: 'center' }}>
<img alt='title' src={title_image} style={{ maxHeight: '15vh', maxWidth: '100%', width: 'auto !important' }} />
</div>
<div id='menu' style={{ width: '100%' }}>
<MenuIcon nav={nav} onClick={() => showNav(!nav)}>
<div />
<div />
<div />
</MenuIcon>
<MenuLinks nav={nav}>
<ul>
//Removed
</ul>
</MenuLinks>
</div>
</div >
)
}
export default Header
And here is the index code.
import React, { useState } from "react"
import Header from "./header"
import Footer from "./footer"
import "./style.css"
import VideoFile from "../../resources/vide_file.mp4"
const Index = () => {
const [nav, showNav] = useState(false)
return (
<div style={{ display: "flex", flexDirection: "column" }}>
<Header style={{ alignItems: "flex-start" }}>
</Header >
<video loop autoPlay muted style={{ preload: 'auto', height: "75vh", objectFit: "cover", display: "block", margin: "0 auto", alignItems: "stretch" }}>
<source src={VideoFile} type="video/mp4" />
</video>
<Footer style={{ alignItems: "flex-end" }}>
</Footer>
</div>
)
}
export default Index
A slight tweak to the margin property on your div id='title' element fixes the issue:
margin: '0 auto'
Remember that margin: 'auto' centers elements horizontally and vertically. I believe what's happening is Chromium is properly centering the element within the direct parent container, in this case:
<div id="header" style="height:100%;background-color:black;display:grid;grid-template-columns:20% 60% 20%"></div>
Safari instead is going a level up and centering the element on the grandparent, which is the full viewport height:
<div style="display:flex;flex-direction:column"></div>
Specifying a '0' margin above and below the element forces Safari to move the logo back to the top of the parent element.
The last element in my list is being cut off. I can see from console logs that it's rendering and if I comment out the position from being fixed, I can see the element at the bottom of the list. However, for some reason, I cannot see it when I make the position fixed (the behavior I want the list to have).
File where I render the list (the list is JobFeed):
return (
<div className="App">
<div style={headerStyle}>
<h3>header></h3>
<ListsHeader state={state} dispatch={dispatch}/>
</div>
<div style={listContainerStyle}>
<JobFeed state={state}/>
</div>
</div>
);
And the styles:
const headerStyle: CSS.Properties = {
display: 'flex',
flexDirection: 'row'
}
const listContainerStyle: CSS.Properties = {
scrollBehavior: 'smooth',
maxHeight: '100vh',
width: '100%',
overflow: 'auto',
position: 'fixed',
margin: 0
}
The list component:
return (
<ul style ={listStyle}>
{activeJobs.map(item => {
return(
<li key={item.id}>
<JobCard item={item}/>
</li>
)
})}
</ul>
)
And the list style:
const listStyle: CSS.Properties = {
display: 'flex',
flexDirection: 'column',
listStyleType: 'none',
listStyle: 'none',
paddingLeft: '26%',
height: '100vh'
}
I'm using react, typescript, and csstype for the styling.
For some reason it was like 200px too short, for the list style I added a marginBottom of 250px and that solved it. Not sure why that happened.
I am creating a chat window where I have my users on the left and my messages on the right.
The thing is I want both columns to grow to the end of the viewport or till the footer but there is no way to make it works. Here is my component.
import Grid from "#material-ui/core/Grid";
const Prueba = () => {
return (
<div style={{ display: "flex" }}>
<Grid container spacing={1} style={{ flexGrow: 2 }}>
<Grid
item
xs={12}
sm={12}
md={4}
lg={3}
style={{ background: "black" }}
></Grid>
<Grid
item
xs={12}
sm={12}
md={8}
lg={9}
style={{ background: "blue" }}
></Grid>
</Grid>
<div
style={{
position: "fixed",
bottom: 0,
height: 100,
width: "100%",
backgroundColor: "red",
}}
></div>
</div>
);
};
export default Prueba;
The container is inside a flex element and the Grid Container has flexGrow property 1. What is not working here?
Here is how it renders now. It's like my Grid container has no height and actually I want it to grow all down to the footer.
You can do this in material-ui with css grid
https://codesandbox.io/s/naughty-yonath-wqr1p?file=/src/App.js
import { styled } from "#material-ui/core";
const Grid = styled("div")({
display: "grid",
gridTemplateColumns: "1fr 3fr",
height: "100vh"
});
const Footer = styled("div")({
position: "fixed",
bottom: 0,
height: 100,
width: "100%",
backgroundColor: "tomato"
});
export default function App() {
return (
<div className="App">
<Grid>
<div style={{ background: "khaki" }}>Left</div>
<div style={{ background: "lightsalmon" }}>Right</div>
</Grid>
<Footer />
</div>
);
}
I'm using Material UI with a drawer.
Inside the drawer, is a set of Collapsible lists. When I expand the list, the list text items can be quite long, and the drawer jumps out much wider.
I would like the drawer to have a width that is 30% of the window size, but when I try to set the classes on the drawer, neither root nor modal classNames seem to hold the drawer width in place.
This is the Drawer code:
<Drawer classes={drawerClasses} open={showStandardDrawer} anchor={"right"} onClose={closeDrawer}>
{Array.from(items).map((item, index) => {
return (
<List
key={`list-${index}`}
component="div"
aria-labelledby="nested-list-subheader"
subheader={
<ListSubheader component="div" id="nested-list-subheader">
{item.title}
</ListSubheader>
}
className={classes.root}
>
{ item.elements.map((el, index) => {
return (
<React.Fragment key={index}>
<ListItem key={index} button onClick={() => handleExpand(index)}>
<ListItemText primary={el.name} />
{open[index] ? <ExpandLess /> : <ExpandMore />}
</ListItem>
<Collapse in={open[index]} timeout="auto" unmountOnExit>
{ el.descriptions.map((description, index) => {
return (
<List key={`l-${index}`} component="div" disablePadding>
<ListItem button className={classes.nested} >
<ListItemIcon>
<StarBorder />
</ListItemIcon>
<ListItemText primary={description} primaryTypographyProps={{noWrap:true, width:'200px'} } />
</ListItem>
</List>
)})
}
</Collapse>
</React.Fragment>
)
})}
</List>
)
})}
</Drawer>
and these are the classes applied to the drawer ('drawerClasses'):
{
root: {
maxWidth: '200px',
minWidth: '50%',
width: '50%',
overflow: 'hidden'
},
modal: {
maxWidth: '50%',
minWidth: '50%',
width: '50%'
}
}
These aren't the styles I necessarily want, I'm just trying to see if I can get Drawer to size itself instead of sizing around its children.
Instead of modal, use the paper class. The Paper element within the drawer is the main visible container. The root and modal classes are applied to wrapper elements that are positioned in such a manner that their widths won't necessarily affect the Paper width.
Here's a code excerpt from the Permanent drawer demo:
const useStyles = makeStyles(theme => ({
drawer: {
width: drawerWidth,
flexShrink: 0,
},
drawerPaper: {
width: drawerWidth,
},
}));
...
<Drawer
className={classes.drawer}
variant="permanent"
classes={{
paper: classes.drawerPaper,
}}
anchor="left"
>
https://codesandbox.io/s/zxljh