Broken Layout (CodePen link shared) Plz help!

I was trying to display some data, but i dont understand why my cards are overflowing from the above inside the project list div. I tried to cut of the code as much as I could and use a dummy layout with same styles and classes. The issue is still there. I used forEach loop on the array which will create cards equal to the number of elements inside the project-list div. The cards are displayed with the required styles but the overflow from the top and some number of cards are always hidden from the top whereas for the design to work, i added overflow - y to scroll becoz I needed a scrollbar. I really cant understand whats going on even after cutting of so much of code and trying it out with a dummy layout. The broken layout is inside the right div which has a black background and cards in it . CODEPEN LINK : https://codepen.io/Zeshan-Merchant/pen/WNLgVJW
No description
16 Replies
V3X4TI0US
V3X4TI0US•14mo ago
In my viewport or screen, the projectList div is even smaller. Whereas in the codepen, if we extend, it will show the above cards however, i want the first card to be displayed from the start of the div and so on, because my project-list div has some fixed height. also any optimization tips are most welcome as I am a beginner.
Chris Bolson
Chris Bolson•14mo ago
In your #projects-list selector you are using flex and have added `justify-content: center;`` Try removing that
MarkBoots
MarkBoots•14mo ago
justify-content: center on the #projectlist is doing that haha, just a bit too late 😉
Chris Bolson
Chris Bolson•14mo ago
milliseconds
V3X4TI0US
V3X4TI0US•14mo ago
lol guys, this got me for about two days. also I had to figure out a way to a dummy layout in the codepen as the backend was running on localhost. One more thing, i remember why i did justify content center, for the loading spinner to work, in the code pen, i have not added the spinner but there is a div which I need in the center of the project list. How can I do that?
V3X4TI0US
V3X4TI0US•14mo ago
No description
V3X4TI0US
V3X4TI0US•14mo ago
this is after removing the justify-content center before, it was centered from properly.
MarkBoots
MarkBoots•14mo ago
you could put it in a absolute position element, relative to the container, then it will not fall in the flex layout or you could do the justify content center, but remove it when the data loads
V3X4TI0US
V3X4TI0US•14mo ago
ohhh. which one would be better? in terms of good practice?
MarkBoots
MarkBoots•14mo ago
maybe even better is use grid for that container. and put a place-self:center on the loadicon different solutions
V3X4TI0US
V3X4TI0US•14mo ago
hmmm, not so familiar with grids as I mostly use flexbox for layouts. But yeah i will work with one of your solution @MarkBoots @Chris thank u soooo much guysss cant thank u guys enough.
MarkBoots
MarkBoots•14mo ago
you'll figure it out
Chris Bolson
Chris Bolson•14mo ago
just adding
inset:0;
margin:auto;
inset:0;
margin:auto;
to your spinner centers it which actually surprises me as it doesn't have position absolute 🤔 .... ah, it is due to the parent container having flex.
V3X4TI0US
V3X4TI0US•14mo ago
what is inset
MarkBoots
MarkBoots•14mo ago
inset is shorthand for top/right/bottom/left all positions are set to 0, so it will stretch over the full width and height with the margin: auto, it gives both directions equal margins so it will center
V3X4TI0US
V3X4TI0US•14mo ago
Ohhh Got it Thanks you all
Want results from more Discord servers?
Add your server