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
16 Replies
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.
In your #projects-list selector you are using flex and have added `justify-content: center;``
Try removing that
justify-content: center on the #projectlist is doing that
haha, just a bit too late 😉
milliseconds
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?
this is after removing the justify-content center
before, it was centered from properly.
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
ohhh. which one would be better?
in terms of good practice?
maybe even better is use grid for that container. and put a place-self:center on the loadicon
different solutions
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.
you'll figure it out
just adding 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.
what is inset
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
Ohhh
Got it
Thanks you all