I have a div like this in react js which renders multiple divs and overflows :
<div
style={{
display: "flex",
padding: "1em 0.7em",
overflowX: "auto",
width: "100%",
direction: "rtl",
background: "#ef394e"
}}
>
{Array.from(Array(10).keys()).map((each, index) => (
<div
key={index}
className="swiper-slide"
style={{
background: "white",
borderRadius: "10px",
width: "270px",
margin: "0 .4em"
}}
>
<div style={{ padding: "2em 6em" }}>Hello</div>
</div>
))}
</div>
But for some reason the padding is applied to the containers right side but not the left side here are some pictures :
How can I apply padding to the array item's container div for both the left and right sides ?
It's because your div width bigger then the body,
and as result your body also have scroll.
Try add boxSizing: border-box to your parent component, and the body scroll will disappear.
const App = () => {
return (
<div
style={{
display: "flex",
padding: "1em 0em",
overflowX: "auto",
width: "100%",
direction: "rtl",
background: "#ef394e",
boxSizing: "border-box" // <--- this line
}}
>
...
</div>
);
};
It's the padding on the div. It's to little and the margin too.
import React from "react";
const App = () => {
return (
<div
style={{
display: "flex",
padding: "1em 0em",
overflowX: "auto",
width: "100%",
direction: "rtl",
background: "#ef394e"
}}
>
{Array.from(Array(10).keys()).map((each, index) => (
<div
key={index}
className="swiper-slide"
style={{
background: "white",
borderRadius: "10px",
width: "270px",
margin: "0 .4em"
}}
>
<div style={{ padding: "2em 6em" }}>Hello</div>
</div>
))}
</div>
);
};
export default App;
Related
I am using nextjs. I want use next/image for my background Image for a div. I saw several answers but everyone posting for full screen background image using next/image and not for a single div background image. I got this https://uharston.medium.com/next-js-image-optimization-on-background-images-65de18ea03f5. But its for full screen. I can use normal background Image but its not optimized like next/image.
Here's the Code i tried:
import Image from 'next/image'
export default function Home() {
const imgURL = "https://i.postimg.cc/kXb4L4hB/abstract-blur-empty-green-gradient-studio-well-use-as-backgroundwebsite-templateframebusiness-report.jpg"
return (
<div style={{ backgroundColor: "black", height: "100vh" }}>
<h1 style={{ color: "white", textAlign: "center" }}>Home Page </h1>
{/* Background Image */}
<div style={{ height: "500px", position: "relative" }}>
<Image
alt="main"
src={imgURL}
fill
style={{ objectFit: "cover", objectPosition: "center" }}
quality={100}
/>
</div>
{/* Content should come over image */}
<div style={{ display: "flex", alignItems: "center", flexDirection: "column" }}>
<h3 style={{ color: "white" }}>Welcome Home</h3>
<h4 style={{ color: "white" }}>Tom</h4>
</div>
</div>
)
}
I need like this,
But I am getting this
I want the Welcome Home and Tom Text to be over the image. Please help me with some solutions.
You can set the image as background of the div like this :
<div style={{
height: "500px",
position: "relative",
backgroundImage: `url(${imgURL})`,
backgroundSize: "cover",
backgroundPosition: "center"
}}>
Or with next/Image :
<div style={{
height: "500px",
position: "relative"
}}>
<Image
alt="main"
src={imgURL}
fill
quality={100}
/>
<div style={{
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
color: "white",
textAlign: "center"
}}>
<h3>Welcome Home</h3>
<h4>Tom</h4>
</div>
</div>
I am trying to resize an image in React, but for some reason changing the height and width of the tag via useStyles does not make the image smaller, but simply shifts it around in the page.
Code:
import { makeStyles } from "#material-ui/core/styles";
import { SvgIcon, Typography } from "#mui/material";
import { Icon } from "#mui/material";
const useStyles = makeStyles((theme) => ({
pageContainer: {
display: "block",
marginTop: 120,
justifyContent: "center",
alignItems: "center",
},
logo: {
display: "flex",
justifyContent: "center",
alignItems: "center",
width: "50%",
height: "50%",
},
info: {
display: "block",
justifyContent: "center",
alignItems: "center",
},
iconContainer: {
display: "flex",
height: "20vh",
width: "auto",
},
}));
const teamNames = [
"Name1",
"Name2",
"Name3",
"Name4",
];
export default function () {
const classes = useStyles();
return (
<div className={classes.pageContainer}>
<div className={classes.logo}>
<img src={process.env.PUBLIC_URL + "/myLogo.png"}></img>
</div>
<div className={classes.info}>
<Typography variant="h3" display="block" align="center">
About the Team
</Typography>
{teamNames.map((personName) => (
<Typography variant="h5" display="block" align="center">
{personName}
</Typography>
))}
</div>
</div>
);
}
I'm not quite sure what is the issue, all I really want to do is to make the image smaller proportionally and put it at the center of the page.
You will need to add this css to your img. this will make sure that the img adjusts itself within the parent div.
width: 100%;
height: fit-content;
I am having trouble with a red arrow '::before' pseudo element being partly cut-off outside of its '.MuiPaper-root' container. I would like for it to still be visible, any suggestions?
Below I have provided the relevant code and screenshots:
const useStyles = makeStyles(theme => ({
root: {
left: '5rem !important',
'& .MuiPaper-root': {
'&::before': {
position: 'absolute',
left: '4rem',
display: 'inline-block',
top: '-3.9rem',
fontSize: '5rem',
fontFamily: 'Material Icons',
content: '"arrow_drop_up"',
color: 'red',
zIndex: '5 !important',
},
},
},
}));
<S.Item style={{ alignSelf: 'stretch' }}>
<S.ItemGrid>
<S.Title>Guest rating</S.Title>
<S.Rating>
<FormControl style={{ width: '10rem' }}>
<S.StyledSelect
defaultValue={3.5}
value={rating.currency}
onChange={changeRating('currency')}
renderValue={option => option.value}
MenuProps={{
classes: { root: classes.root },
}}
>
{ratings.map(option => (
<S.StyledMenuItem key={option.value} value={option}>
<div>{option.value}</div>
<div>{option.label}</div>
</S.StyledMenuItem>
))}
</S.StyledSelect>
</FormControl>
</S.Rating>
</S.ItemGrid>
</S.Item>
Add overflow: 'visible' in your Paper style to prevent the content from being clipped even if it's outside the parent:
overflow: "visible",
"&::before": {
// ...
}
i want to place a popup based on the position of leftnav element. basically place this popup next to the lefnav element such that it is vertically center to leftnav element.
below is the picture of how the popup should be placed
below is my code,
function LeftNav() {
return (
<Wrapper id="left_nav">
</Wrapper>
);
}
const Wrapper = styled.div`
position: absolute;
top: 50%;
right: 16px;
display: flex;
flex-direction: column;
flex: 1;
`;
function PopUp() {
const left_nav_el = document.getElementById('left_nav');
return (
<PopupWrapper />
);
}
const PopupWrapper = styled.div`
width: 400px;
position: relative;
display: none;
`;
i am not sure how to get the top-left corner of the leftnav and use it as coordinates to place the popup in center and 16px away to the leftnav.
could someone help me with this. thanks.
const App = () => {
function LeftNav() {
return (
<div
style={{
height: "50px",
background: "black",
width: "50px"
}}
id="left_nav"
/>
);
}
function PopUp() {
return (
<div
style={{
marginRight: "16px",
height: "100px",
background: "green",
width: "50px"
}}
className="popup"
/>
);
}
return (
<div
style={{ width: "100px", display: "flex", alignItems: "center"}}
className="App"
>
<LeftNav />
<PopUp />
</div>
);
}
I have a React component (Cartouche in the code) that I call x times in a div, depending on what div in which I call it.
For example, I have a div with height:690px and another with height:450px and I call the same component x times in each div, depending on the div.
I want the component to resize for it fit perfectly in each div.
Already try to change component size in CSS with % but it doesn't work.
//Component
export default function Cartouche(props) {
return (
<div style={{ width: '100%', backgroundColor: '#E5E2E2', marginTop: '2%', marginBottom: '5%', borderRadius: 30, height: 'auto' }}>
<div style={{ fontWeight: 'bold' }}>{props.data.STRING_1}</div><br />
<div style={{ textTransform: 'uppercase' }}>{props.data.STRING_2}</div>
<div style={{ border: 'solid 1px black', width: '25%', position: 'absolute', zIndex: '-1', height: 20, marginLeft: '2%', borderRadius: '0 0 10px 10px' }}>
<div style={{ position: "absolute", bottom: 3, left: 5 }}>
{props.data.TIME}
</div>
</div>
</div >
)
//First div in which I call it 5 times
return (
< div >
<div style={{ width: document.body.scrollWidth / 2.165, backgroundColor: 'white', height: 690, margin: '1% 0', padding: 25, borderRadius: 25, position: 'absolute', left: 11, zIndex: -1 }}>
<div id='parent' style={{ display: 'flex', alignItems: 'center', width: '100%', justifyContent: 'center' }}>
<div style={{ textAlign: 'center', border: '2px solid black', borderRadius: '50px', padding: '0 5%', display: 'flex' }}>
<h3 style={{ margin: 0 }}>PLAYLIST</h3>
</div>
</div>
<div id="cartouchePlaylist" style={{}}>
{Playlist ? displayPlaylist() : null}
</div>
</div>
</div>
);
//Second div in which I call it 6 times
< div >
<div style={{ width: document.body.scrollWidth / 2.165, backgroundColor: 'white', height: 360, marginTop: '17.6%', marginLeft: '-48.2%', padding: 25, borderRadius: 25, position: 'absolute', right: 18, top: -118 }}>
<div id='parent' style={{ display: 'flex', alignItems: 'center', width: '100%', justifyContent: 'center' }}>
<div style={{ textAlign: 'center', border: '2px solid black', borderRadius: '50px', padding: '0 5%', display: 'flex' }}>
<h3 style={{ margin: 0 }}>CARTOUCHIER</h3>
</div>
</div>
<div style={{}}>
{Cartouchier ? displayCartouchier() : null}
</div>
</div>
</div>
);
Use minHeight instead of height, so if the height exceeds it will resize accordingly, but never less than minHeight that we specify.