Hey guys and gals,
I’m stuck and was hoping someone could unstuck me. I’ve nearly finished my React Recipe App, but I need to get rid of this visual bug first.
The situation: Each recipe is represented by a card, showing just its title unless the mouse hovers over it. When hovered over, the card expands showing the user the recipe’s ingredient list and directions.
The cards fill the space horizontally before falling down into a new row, when the user adds enough recipes to trigger that.
The problem: If there are enough boxes to have a second or third row of cards, when one hovers over a card in one of the top rows, all of the cards below move down to make room for the expanding information in that one card, in that one row.
The preferred behavior: I would prefer if only the cards directly below the hovered card move down to make room for the new information.
So, how might I accomplish this? At the moment my cards are just
<divs> with the attribute
display: inline-block. I suspect I should put them in some kind of table, that way they’re bound by columns. But, I’m not certain that that will fix it and I don’t even know what to call this desired behavior. This feels like a CSS issue to me, so I’d prefer a CSS solution, but if JS is needed I’m game.
TLDR; How do I get divs that expand on mouse hover, to only push the content that is directly below them?
Replicated Codepen example