Radzen Panel and Card Combination

Radzen Studio Blazor Server
1

I am trying to put a card inside a panel. It is an awesome combination, but I am have a problem with the sizing. I can set the height of the panel to 100% and it expands to the height of the row with no problem, but when I try to get the card to expand with the Panel, it will only expand to the content within it. I tried putting the card directly in the panel as well as putting a row and column in and then putting the card in that. No combination of 100% height makes the card expand to fill the panel. Not sure if it is even possible or a characteristic of the card control.

Can you let me know if there is a way to make that work?

2

Try appending the following CSS at the end of server\wwwroot\assets\css\styles.css

.rz-panel-content-wrapper {
  flex: auto;
  margin: 1.4375rem 0 0 0;
}

.rz-panel-content {
  height: 100%;
  margin: 0;
}
3

That CSS solves the height problem, but it removes the ability to collapse the panel. When I try to collapse a panel, it collapses the content, but leaves the actual panel open.

4

Here is how this behaves at my side.
card-in-panel
The content collapses and the panel occupies 100% of the height of its parent (a row with height of 300px).

5

Yes, but that's not the original functionality of the panel. If I do nothing, the content will not fill the panel (I am using a card inside) but the panel will close as designed. If I put the CSS in, the content fills the panel, but the panel itself will not close, just the content, so having the panel does not have the desired visual effect. I also tried just putting a card in a column and setting it to 100%, but the card extends beyond the column height so also does not work for what I am trying to do....

I simply want to have a container in a column that I can control the background color of that will take up 100% of the column height and match the height of columns in the same row...so if if all the columns have different content that has different heights, I want the columns (and content) to match the tallest column.
Here is an example of what I am trying to avoid

image
image1920×1080 261 KB

6

I set the height of the third column to see if I could get the others to match the height...but no luck without losing panel functionality.

7

Well that happens if you don't set height. You can have both height 100% and no height at the same time.

8

Ok, so what I am looking to do cannot be done with the current controls (panel and card). I will keep working on it. Thank You