rendering multiple <div> on top of each other for the same component
Unanswered
Purple Martin posted this in #help-forum
Purple MartinOP
i am totally new in the frontend world after years in backend, i want to know how i can style and render the only component and take the size of the window, i did using global.css like this:
this will render four <div> elements on top of each other.|
the expected is one chart taking the full with and hight of the scree
the page.js:
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
main {
width: 100%;
height: 100%;
overflow: auto;
}
.chart-container {
width: 100vw;
height: 100vh;
background-color: #f5f5f5;
box-sizing: border-box;
}this will render four <div> elements on top of each other.|
the expected is one chart taking the full with and hight of the scree
the page.js:
export default function Home() {
return (
<main>
<TradingChart/>
</main>
)
}12 Replies
I don't see 4 div's in your code, so I think you just mean the <main> and the <TradingChart>. In this case the main need to be 100vw and 100vh and the Chart needs to be 100% and 100% width and height
If that helps you, than please mark my message as solution. You can see how to do that here: https://nextjs-forum.com/post/1163572575742476298#message-1163572585364201582
Purple MartinOP
ok i will check now and tell you
Purple MartinOP
this is the issue i have, let me share with you more details
Purple MartinOP
@B33fb0n3
@Purple Martin <@301376057326567425>
let me check this...
would you be able to share your code with the 4 divs?
Purple MartinOP
ok
there is no 43 divs by the way but it generate 4 divs, three of them without data the forth one is rendered with data, so i go to developer tools and deleted the three above one, i get the chart that i want
@B33fb0n3
hm, that looks good for me 🤔
Maybe someone else can help
Maybe someone else can help
Purple MartinOP
oh thank you man, i am really lost what is going on