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
vince
vince12mo ago
#how-to-ask-good-questions
M@HeR
M@HeR12mo ago
i have put all information i thinks
vince
vince12mo ago
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 overflow
M@HeR
M@HeR12mo ago
my 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
vince
vince12mo ago
Codepen
M@HeR
M@HeR12mo ago
MaherUnlocker
CodeSandbox
great-brown-jjzkvp - CodeSandbox
great-brown-jjzkvp by MaherUnlocker using loader-utils, react, react-dom, react-scripts
M@HeR
M@HeR12mo ago
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"
vince
vince12mo ago
Use data attributes for that
M@HeR
M@HeR12mo ago
how look this
M@HeR
M@HeR12mo ago
this first render before loding picture after get image it will render all card
No description
M@HeR
M@HeR12mo ago
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
vince
vince12mo ago
.
M@HeR
M@HeR12mo ago
i dont understaand bro
vince
vince12mo ago
I think there may be a language barrier
M@HeR
M@HeR12mo ago
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
vince
vince12mo ago
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
M@HeR
M@HeR12mo ago
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
vince
vince12mo ago
You can set the width/height attributes on your img programatically like you have here:
No description
vince
vince12mo ago
You'd have to pass the columns/rows state/variables from the parent to <ProductPreview />
vince
vince12mo ago
And then set the img inside <ProductPreview /> to something like this:
No description
M@HeR
M@HeR12mo ago
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
vince
vince12mo ago
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.
M@HeR
M@HeR12mo ago
the only way is to put heigh and width directly to image i want to be dynamic with css but i cant resolve it
Want results from more Discord servers?
Add your server