We Keep Coding

How to place any button outside the dialog box

I want a close button that needs to work outside the dialog box.
I want this modal where the close button is outside div.
Expected:
Implementation:
const Component = styled(Box)`
display: flex;
height: 528px;
`;
const Image = styled(Box)`
width: 270px;
background: url(https://static-assets-web.flixcart.com/www/linchpin/fk-cp-zion/img/login_img_c4a81e.png)
no-repeat;
color: #fff;
background-color: #2874f0;
background-position: 50% 85%;
padding: 40px 33px;
& > p {
margin-top: 12px;
color: #dbdbdb;
font-size: 18px;
}
`;
const ReqBtn = styled(Button)`
background-color: #fb641b;
text-transform: none;
height: 48px;
width: 305px;
padding: 10px 20px 10px 20px;
`;
const Wrapper = styled(Box)`
padding: 56px 35px 16px 35px;
& > p {
color: #878787;
font-size: 12px;
}
`;
// <--------------------------------------- styled section ends-------------------------------->
const LoginDialog = ({ open, setOpen }) => {
const handleCloseDialog = () => {
setOpen(false);
};
return (
<Dialog
open={open}
onClose={handleCloseDialog}
sx={{
"& .MuiDialog-container": {
"& .MuiPaper-root": {
width: "100%",
maxWidth: "750px",
},
},
}}
>
<Component>
<Image>
{/* <Typography
style={{ fontWeight: "bold", fontSize: "28px", color: "#fff" }}
>
Login
</Typography>
<Typography>
Get access to your Orders, Wishlist and Recommendations
</Typography> */}
</Image>
<Wrapper>
{/* <TextField label="Enter Email/Mobile Number" variant="standard" />
<Typography>
By continuing, you agree to Flipkart's Terms of Use and Privacy
Policy.
</Typography>
<ReqBtn
variant="contained"
sx={{
"&.MuiButtonBase-root:hover": { backgroundColor: "#fb641b" },
}}
>
Request OTP
</ReqBtn>
<Typography>New to Flipkart?Create an Account</Typography> */}
</Wrapper>
//close button
<ClearIcon
onClick={handleCloseDialog}
style={{ cursor: "pointer", backgroundColor: "yellow" }}
/>
</Component>
</Dialog>
);
};
export default LoginDialog;
I tried pasting the <ClearICon> outside <Dialog> component but the issue is the close button came in my navbar position
<>
<ClearIcon
onClick={handleCloseDialog}
style={{ cursor: "pointer", backgroundColor: "yellow" }}
/>
</>
How can I place the CloseIcon outside the dialog box as per provided design?

something like this...
.box{
position:relative;
background:gray;
width:100px;
height:100px;
}
.box>.controls{
position:absolute;
right:-30px;
}
<div class="box">
<div class="controls">
<button>x</button>
</div>
</div>

CSS Slanding Div edges over an Image

I am trying to design a simple report with the format as shown in the following Figma file using React and Material UI. However, I am encountering a challenge when designing the slanting edges of the divs as shown on the report. Plus the purple border. This is what I have done so far, but it is far from being perfect:
const leftDiv = {
content: "",
position: "absolute",
top: "50%",
right: 0,
width: "100%",
height: "50%",
backgroundColor: 'rgb(255, 255, 255)',
clipPath: "polygon(0 0, 0% 0%, 100% 100%, 0% 100%)"
}
const rightDiv = {
position: "absolute",
bottom: 0,
right: 0,
display: 'inline-block',
width: 0,
height: 0,
borderStyle: 'solid',
borderWidth: '0 0 500px 100vw',
borderColor: 'transparent transparent #FFFFFF transparent',
}
const contentDiv = {
backgroundColor: 'rgb(255, 255, 255)',
width: "100%",
height: "100%",
clipPath: "polygon(100% 0, 100% 0%, 100% 100%, 0% 100%)"
}
const Coverpage = () => {
return (
<Container>
<Grid>
<Paper>
<Box sx={{ position: 'relative', width: '100%' }}>
<CardMedia
component='img'
alt="cover page image"
image='https://unsplash.com/photos/vbxyFxlgpjM'
/>
<Box style={leftDiv}></Box>
<Box style={rightDiv}>
<Box style={contentDiv}>
<Box sx={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', alignItems: 'flex-end', textAlign: 'right', pr: 8 }}>
<Typography sx={{ fontSize: '24px', mb: 2 }}>Lorem ipsum</Typography>
<Typography sx={{ fontSize: '48px', fontWeight: 'bold', textTransform: 'uppercase', color: '#000133' }}>Lorem ipsum</Typography>
<Typography sx={{ fontSize: '64px', fontWeight: 'bold', textTransform: 'uppercase', color: 'blue' }}>Lorem ipsum</Typography>
</Box>
</Box>
</Box>
</Box>
</Paper>
</Grid>
</Container>
);
}
export default Coverpage;
I found using clipPath as the easiest, even though I would prefer using triangles to design the slanting edges since later, I am planning to use react-pdf-renderer which I am not sure if it supports clipPath in its CSS styling.
I will appreciate a pointer to the right direction.

Dan touched on the purple border. About the slanted div you can use this trick:
.slanted{
height: 0;
width: 0;
border-top: solid 100px transparent;
border-right: solid 50vw blue;
border-left: solid 50vw blue;
border-bottom: solid 100px blue;
}
You're making a div with no height or width. The borders meet along a diagonal line and so you can have a triangle effect.
You can use an additional div for the text
Edit: making the borders responsive
To make the border trick dynamic you can use some JS:
function App() {
const footerRef = React.useRef()
useEffect(() => {
window.addEventListener('resize', setBorders)
return () => {
window.removeEventListener('resize', setBorders)
}
}, [])
useEffect(() => {
if (!footerRef.current) return
setBorders()
}, [footerRef])
const setBorders = () => {
let containerWidth = document.querySelector('.container').clientWidth
let footerStyle = footerRef.current.style
footerStyle.borderRightWidth = containerWidth/2+'px'
footerStyle.borderLeftWidth = containerWidth/2+'px'
}
return (
<div className='App'>
<div className='container'>
<div className='footer' ref={footerRef}>
</div>
</div>
</div>
);
}
export default App
We are adding a 'resize' eventListener to the window that will trigger the setBorders() function. In this function we select the container element and set the width of the footer borders to be half of it.
To make sure the function also fires on initial load I added a useEffect which will fire when the footer is created and its Ref is set. You can also use a callback ref instead.
The css, I assumed the footer will be static height:
.container{
height: 200px;
width: 100%;
background: red;
}
.footer{
position: relative;
height: 0;
width: 0;
top: calc(100% - 100px);
/*border-top width + border-bottom width = 100px*/
border-top: 50px solid transparent;
border-bottom: 50px solid green;
border-right: solid blue;
border-left: solid blue;
}
If you don't mind making the container position: relative; you can then just do:
.footer{
position: absolute;
bottom: 0;
}

You just need to use a simple CSS transform on the element.
transform: skew(-15deg, -15deg);

How to position a child div to span from the beginning to the end of a parent div?

I'm trying to position the FullWidthDiv component to span from the beginning of the MainDiv side, all the way to the end. I've tried giving in an absolute position and playing around with flex, but I can't get it to not start from the SubDiv component.
Is it possible to achieve this?
My CodeSandbox approach.
Here is what I'm trying to achieve

It is a little bit hacky, but you can center ChildDiv with align-items: center.
Also, shrink the FullWidthDiv to 280.
And last you have to add flex: 1, width: 100% to the div, that hold SubChildDiv inside App component.
export default function App() {
return (
<MainDiv>
<ChildDiv>
<div style={{flex: 1, width: '100%'}}>
<SubChildDiv />
<SubChildDiv />
</div>
<FullWidthDiv />
</ChildDiv>
</MainDiv>
);
}
const MainDiv = ({ children }) => (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
width: 250,
height: 250,
backgroundColor: "red",
padding: "1rem"
}}
>
{children}
</div>
);
const ChildDiv = ({ children }) => (
<div
style={{
width: 200,
height: 200,
backgroundColor: "blue",
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "space-between"
}}
>
{children}
</div>
);
const SubChildDiv = () => (
<div
style={{
display: "flex",
width: "100%",
height: 30,
backgroundColor: "green",
border: "1px solid black"
}}
/>
);
const FullWidthDiv = () => (
<div
style={{
width: 280,
height: 30,
border: "1px solid black",
backgroundColor: "green"
}}
/>
);
If you want the FullWidthDiv to be with 100% width, you have to calculate the 100% width and add the padding from both sides of MainDiv it will look something like that: calc(100% + 2rem).

How to prevent events from acting in nested divs when using React Hooks

I have nested div elements. Outside there should be events to move and to click. I want to enable a nested element to act as a button and to prevent the event from outside to act. In the example when we click on the red part, both events are happening. How can I stop the event from the green part when we click on the red part? stopPropagation() did not do the job. I am using React and my structure is more complex than in the example. But I wanted to reduce for reasons of clarity.
I would be happy if someone can help.
#bigCircle {
display: flex;
justify-content: center;
align-items: center;
width: 180px;
height: 180px;
border-radius: 50%;
background-color: green;
}
#smallCircle {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="bigCircle">
<div id="smallCircle"></div>
</div>
<script>
document.getElementById("bigCircle").addEventListener("click",myBigCircle);
document.getElementById("smallCircle").addEventListener("click",mySmallCircle);
function myBigCircle(){
console.log("Hello");}
function mySmallCircle(){
console.log("Bye");}
</script>
</body>
</html>
I think it is related to React Hooks. Here you see the example with stopPropagation not working:
import React, { useState } from 'react';
function Test() {
let [test, setTest] = useState(false);
return (
<div id="wrapper"
style={styleBigCircle}
onMouseUp={() => {
setTest(false);
console.log("Hello", test)
}
}>
<div id="center"
style={styleSmallCircle}
onClick={(e) => {
e.stopPropagation();
setTest(!test);
console.log("Bye", test)
}}
>
</div>
</div>
);
}
const styleBigCircle = {
display: "flex",
justifyContent: "center",
alignItems: "center",
width: "180px",
height: "180px",
borderRadius: "50%",
backgroundColor: "green"
}
const styleSmallCircle = {
width: "40px",
height: "40px",
borderRadius: "50%",
backgroundColor: "red"
}
export default Test;
I would be happy if someone knows how to fix this.

You are dealing with different events, so to prevent the child element from trigger the parent you would need to add the same event and stopPropagation() on that one instead:
<div
id="center"
style={styleSmallCircle}
onMouseUp={e => {
e.stopPropagation();
}}
onClick={e => {
setTest(!test);
console.log("Bye");
}}
/>
Here is a fully working example:
const Test = () => {
let [test, setTest] = React.useState(false);
return (
<div
id="wrapper"
style={styleBigCircle}
onMouseUp={() => {
console.log("Hello");
}}
>
<div
id="center"
style={styleSmallCircle}
onMouseUp={e => {
e.stopPropagation();
}}
onClick={e => {
console.log("Bye");
}}
/>
</div>
);
};
const styleBigCircle = {
display: "flex",
justifyContent: "center",
alignItems: "center",
width: "180px",
height: "180px",
borderRadius: "50%",
backgroundColor: "green"
};
const styleSmallCircle = {
width: "40px",
height: "40px",
borderRadius: "50%",
backgroundColor: "red"
};
const rootElement = document.getElementById("root");
ReactDOM.render(<Test />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Use event.stopPropagation() to prevent parent trigger.
#bigCircle {
display: flex;
justify-content: center;
align-items: center;
width: 180px;
height: 180px;
border-radius: 50%;
background-color: green;
}
#smallCircle {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="bigCircle">
<div id="smallCircle"></div>
</div>
<script>
document.getElementById("bigCircle").addEventListener("click",myBigCircle);
document.getElementById("smallCircle").addEventListener("click",mySmallCircle);
function myBigCircle(){
console.log("Hello");}
function mySmallCircle(event){
event.stopPropagation()
console.log("Bye");
}
</script>
</body>
</html>

Why div is outside of parent div? Using React

I have a div specified like this:
<button
style={{
padding: "0px",
background: "yellow",
position: "absolute",
left: `${seat.x}%`,
top: `${seat.y}%`,
width: `${squareSizePercentageX}%`,
paddingTop: `${squareSizePercentageX}%`
}}
key={index}
/>
seat.x and seat.y is always under 100. In spite of that div get outside of parent div.
This is how parent looks like:
<div
style={{
display: "flex",
maxWidth: `calc(calc(100vmin * ${aspectRatio})+200px)`
}}
>
<div style={{ width: `calc(100vmin * ${aspectRatio})` }}>
<div
style={{ paddingTop: `${100 / aspectRatio}%`, background: "pink" }} // <-- this is here the parent
>{listContent2}</div>
</div>
<div style={{ width: "200px", background: "yellow" }}>
</div>
</div>
Here all the code:
import React from "react";
import UPUjpestRendezvenyterLayout from "../assets/UPUjpestRendezvenyterLayout.json";
class SelectSeat extends React.Component {
render() {
const seats = UPUjpestRendezvenyterLayout.seats;
const squareSizePercentageX =
UPUjpestRendezvenyterLayout.squareSizePercentageX;
const aspectRatio = UPUjpestRendezvenyterLayout.aspectRatio;
let listContent2 = seats.map((seat, index) => {
return (
<button
style={{
padding: "0px",
background: "yellow",
position: "absolute",
left: `${seat.x}%`,
top: `${seat.y}%`,
width: `${squareSizePercentageX}%`,
paddingTop: `${squareSizePercentageX}%`
}}
key={index}
/>
);
});
return (
<div
style={{
display: "flex",
maxWidth: `calc(calc(100vmin * ${aspectRatio})+200px)`
}}
>
<div style={{ width: `calc(100vmin * ${aspectRatio})` }}>
<div
style={{ paddingTop: `${100 / aspectRatio}%`, background: "pink" }} // <-- this is here the parent
>{listContent2}</div>
</div>
<div style={{ width: "200px", background: "yellow" }}>
</div>
</div>
);
}
}
export default SelectSeat;
Here an image. Small yellow rectangle should be all inside pink area.

you need to set position: relative to parent div

try by giving Css flex-wrap: wrap; and position : relative and don't forget to set left and top to your parent div , these changes can fix your problem