I would like to know how to make a grid column height be that of the enclosing row. In the attached screen shot, each ion-item my list is a grid composed of a row of two columns. I have added borders on the row and columns to illustrate the bounding boxes of each.
The column on the left holds a single check box. The column on the right holds two lines of text (in fact a grid itself). The right column has taller content. So the row height is that of the tallest column, the right one. I require that the left column’s height (that enclosing the check box) be set to the dynamic row height as determined by the tallest row rather than the height of the check box.
I’ve tried many experiments, but have not found one. How do I do this? I’d rather not hard code the height. 100% doesn’t work either. Seems like there should be a recipe for achieving the desired behavior.
Motivation: The reason I need to do this, is that I’ve created a directive that allows the enclosing element (even nested ) of a check box input to be used to toggle the check box. This allows the user to be less accurate in clicking to check box. I can’t benefit from this directive unless the column height can be made to be has tall as the row. Setting the column height explicitly works, but is ultimately hard coded. I don’t want a hard coded solution. Also, I found with this solution that the check box is no longer vertically centered in the column. It stays at the top left.