1

We have created Cards which can be resized and moved around by the user. In some of these Cards, we want to embed a Datagrid which is supposed to "fill" the available space (e.g. a card-block).

I am able to control the width, but haven't found a way to control the height in my scenario. Here, the Datagrid grows way outside my Card, even pushing down the card-footer.

Here is a StackBlitz example which shows the behavior.

BTW, the trick with "height: 100%" doesn't seem to work in my scenario.

Any help would be appreciated.

Adrian
  • 13
  • 2
  • `height: 100%` can only work if the parent has a defined height. In your case, you say the cards can be resized, so I'm guessing they have a dynamic height set directly on the element. That would make the `height: 100%` work, but in your example you're not showing the resizable cards part. – Eudes Mar 12 '18 at 15:31

2 Answers2

0

You are correct that setting the height to a percentage does not seem to restrict it to the card-block itself, but setting to absolute pixels does.

I see in your Stackblitz that you tried to set the height to 300px, but that is still beyond the size of the hosting element. The card itself is set to 400px x 400px, but once rendered, the card-block (where the datagrid is placed) is only 398px x 281px.

Please have a look at this Stackblitz where I set the height of the datagrid to 240px.

Jose Gomes
  • 36
  • 3
  • Thanks a lot @jose-gomes. I am aware that a fixed height would work, but as mentioned, our Cards are supposed to be resizable, so I'm afraid this doesn't really solve my problem. I have updated the [StackBlitz example](https://stackblitz.com/edit/clarity-light-theme-v11-h5xgjg) with "resize-up" and "resize-down" buttons to demonstrate this (in the real application though, the user will be able to set any desired size using the mouse) – Adrian Mar 13 '18 at 14:06
  • Hi Adrian, I see now what the problem is. I am not sure if adding a datagrid to such small card is a good choice, but if the dimension of the card will be hard coded like in your example, then you could always also set the datagrid to a pre-defined size like [this](https://stackblitz.com/edit/clarity-light-theme-v11-sgnayk?file=app/app.component.html). If the card will have variable sizes, then you could always come up with a suitable calculation. – Jose Gomes Mar 13 '18 at 19:47
0

As mentioned in my comment, to use height: 100% you need the parent to have a defined height. Except in your case, it's all dynamic up to the card itself, so you have to propagate that height: 100% down to the datagrid. I updated your plunker with this, and it works fine now: https://stackblitz.com/edit/fit-datagrid-in-card

See https://drafts.csswg.org/css2/visudet.html#propdef-height for the height explanation:

<percentage>

Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the used height is calculated as if 'auto' was specified. A percentage height on the root element is relative to the initial containing block.

Community
  • 1
  • 1
Eudes
  • 1,521
  • 9
  • 17
  • Thanks a lot for your effort, Eudes. Unfortunately, I cannot access the updated plunker. Can you the the link, please? – Adrian Mar 15 '18 at 14:02
  • Sorry about this Adrian, I somehow pasted the wrong StackBlitz link. I updated it, you should be able to check it out now. – Eudes Mar 15 '18 at 20:07
  • Thank you Eudes, it's working perfectly now. Thanks also for the background info. – Adrian Mar 16 '18 at 05:55