problem of height of div take heigh independent to his content
i have container with grid display and row and colm change depend on data getted
and i map list of card product to show all is ok but
card product have 2 div first box contain the iage and the second box have 100px height fixed my problem when i have slow server i see secondtbox render first and th rest not show after th image was loaded how to make the first box take the rest of heigh of card without wainting loading picture
i try heigh 100% and minheight calc(100%-100px) but not work
23 Replies
#how-to-ask-good-questions
i have put all information i thinks
It's much easier for people to help you if you put it in a Codepen.
If I understand your problem correctly it just sounds like you need a min-height on your image container
But not as a percentage, as a fixed number like rem, px, etc
And I'd advise against putting a fixed
100px height on your second div unless you know 100% the data in there will never overflowmy problem is i have container and i have list product to render it
also i have setting for displayed product in container i want to show list product depend of col and row dynamically
for example container display grid row:3 and col:3
i will show 9 product in veiwport if i scroll i see the other 9 product
all it work but my problem i see is i have slow render of list product when is the numer of row and coll will be more than 9
also i see the card product the second box is displayed in all col but the first is not showed after the image is loaded
Codepen
MaherUnlocker
CodeSandbox
great-brown-jjzkvp - CodeSandbox
great-brown-jjzkvp by MaherUnlocker using loader-utils, react, react-dom, react-scripts
if you understand me i want to put all card dynamically depend of number of row and coll getted from setting
this just sample
i want also the container is responsive but is in large device like 22 screen or 17"
Use data attributes for that
how
look this
this first render before loding picture after get image it will render all card
you see this card product but without picture i want to show card complete like have picture but i cant
i put min-heigh to first product calc(100%-100px) to be sure the first box always have correct height but not work
also i tried to make background image in dev is white picture but is not solution i thinks
.
i dont understaand bro
I think there may be a language barrier
my problem is why if i get the image the card product showed correctly if not i see my card very small depend on his content
just iwant to set height and with of card dynamically depend of number of row and coll for grid container
Yes which seems like you can solve it by putting a min-height/min-width on the image container of a fixed size eg 150px
Most likely you just need to put a width/height attribute on your image (don't use a background-image)
That way the browser knows that the image will be 150x150 and set the img size to that even if the image isn't loaded
Now I can't help you with changing the width/height depending on the columns but that seems kind of irrelevant if all you want to do is make it so that the img container has some placeholder width/height
but the size of image change when row of grid change and column also of container
if i put min height and min with for example for 2 col x1 row i will see. small card before load image after it will be big
i have putted calc(100%-100px) min heith of image but it not work
You can set the width/height attributes on your
img programatically like you have here:
You'd have to pass the columns/rows state/variables from the parent to
<ProductPreview />And then set the img inside
<ProductPreview /> to something like this:
look bro in this way i will try to know the px of image for me why
for example if i have 1row 1 col
the grid system will guive me one col
with dynamic height and widh
in this div i have my card product who devided to 2 box firstbox and secondbox
why i see secondbox because have fixed heigh and iwant the rest of height of parent filed by firsbox
https://codepen.io/vince1444/pen/WNPOxBw
For CLS you're still going to have to add an explicit width/height to your image, which you should able to figure out programmatically since you know how many rows/columns you have
You can also remove flexbox entirely from the codepen and just put a height and width of 100% on the
img tag
Though your image should have that already if you have a css reset.the only way is to put heigh and width directly to image
i want to be dynamic with css but i cant resolve it