Issue
Let's say there is a row with X amount of columns. The starting height of these columns should all be the same and each of these columns may expand to change their height based off a click (for this case, hover will be used). Let's also assume the height is dynamic and never gets defined (in this example it will be for the sake of usability).
Here is the sandbox that demonstrates the problem: http://www.cssdesk.com/RkqHc
Code below:
.parent {
display: table;
}
.child {
display: table-cell;
background-color: red;
}
.child2 {
display: table-cell;
background-color: blue;
}
.child2:hover {
height: 400px;
}
<div class="parent">
<div class="child">
Some Test Data
Some Test Data
</div>
<div class="child2">
Test
</div>
</div>
You'll notice that both columns are the same size because of the table/table-cell properties, but when hovering over the blue column the height of the red column increases as well. I've tried using flex and grid but reached the same conclusions.
How would one go about keeping a column's sibling (in this case, the red) its original height when the height of the column in question (blue) changes?
Is there a way to do this without using grid, flex, or table?
Thanks
Solution
Just came across your post. In case you're still searching for an answer to this question, this is what you can do.
Method 1: Table
The thing with a table cell is that if even one cell in a row or column has a greater height/width, all cells in that row/column will adjust themselves to match that and make the table look consistent. So I don't think this is possible with a table.
Method 2: Flex
With flex, increasing the height of one element will increase the height of the parent container as well. Since the parent height increases, the heights of all other flexboxes in the container will also increase to match that.
To stop this behavior, you can use the align-items
/align-content
properties on the parent container to align the flexbox to flex-start
, flex-end
or center
. This will maintain the original height of the flexbox, and position all flexboxes, except the one with the new height, at the top/bottom or vertical center of the parent container.
If you want different flexboxes to be positioned separately, you can assign them a align-self
prop. which will have the same values mentioned above.
This is what it would look like:
.parent {
display: flex;
color: white;
align-items: flex-start;
font-family: sans-serif;
}
.child, .child2 {
padding: 15px 20px;
}
.child {
display: flex;
background-color: crimson;
}
.child2 {
display: flex;
background-color: steelblue;
}
:where(.child2, .child):hover {
height: 150px;
}
<div class="parent">
<div class="child">
Some test data
</div>
<div class="child2">
Test
</div>
</div>
Method 3: Div
Not much to explain here.
.parent {
display: block;
color: white;
font-family: sans-serif;
}
.child, .child2 {
padding: 15px 20px;
}
.child {
display: inline-block;
background-color: crimson;
}
.child2 {
display: inline-block;
background-color: steelblue;
}
:where(.child2, .child):hover {
height: 150px;
}
<div class="parent">
<div class="child">
Some test data
</div>
<div class="child2">
Test
</div>
</div>
Method 4: Grid
Very similar to flex implementation:
.parent {
display: grid;
grid-template-columns: auto auto;
color: white;
align-items: flex-start;
font-family: sans-serif;
}
.child, .child2 {
padding: 15px 20px;
}
.child {
display: block;
background-color: crimson;
}
.child2 {
display: block;
background-color: steelblue;
}
:where(.child2, .child):hover {
height: 150px;
}
<div class="parent">
<div class="child">
Some test data
</div>
<div class="child2">
Test
</div>
</div>
So here you go. Hope this helped you
Answered By - Omar Siddiqui
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.