How to use CSS to fill the visible height of a form

[Nttdocomo]

this._ context.mode.trackContainerResize (true) you can set the width to automatic

Is there any way to set the height to occupy the visible height range?

Now I can only use it heigth:450px To fix to a value

[DianaBirkelbach]

Hi @Nttdocomo , 

As far I know, the height is not given by the runtime, since the PCFs are allowed to set their own height.

You could try with css: height: "100%", not sure if will work.

Is this a subgrid? If yes, I've saw an unsupported way to read the number of rows which was customized  for the subgrid using

(context.mode as any).rowSpan

I guess you could multiply this by a constant, and calculate the height in px that way. 

Hope this helps.

Kind regards,

Diana

[ben-thompson]

css:height:100% won't work as that just inherits the height of the parent element which is probably set to 80 pixels or so.

So there won't be any CSS only way to do it. You could use the parent and window / document elements to identify the full height of the window that is opened and use a combination of that and the initial y position of your PCF component to calculate how tall to set the height to be (again using Javascript) but it will never be perfect and you will never know if there is another field beneath your PCF component that needs to be visible.

[PowerMaverick]

If this is for a dataset control then look at my PCF Control.

https://github.com/Power-Maverick/PCF-Controls/blob/master/HoverDetailsList/HoverDetailsListControl/...

Line number 62 to 68

Also, I have used my own custom div container to set the height rather than setting it on PCF's container.

----
Danish Naglekar | Power Maverick
MVP Business Applications
If this post helps, then please consider Accept it as the solution to help the other members.

[DianaBirkelbach]

@PowerMaverick Hi Danish,

Interesting approach to use the "em" css unit, which means relative to the font size. 

But basically, it means using some kind of constant, which you multiply to .rowSpan, which is unsupported.

Do you have any hints that this might get supported in the future?

Kind regards,

Diana

[PowerMaverick]

header & footer are 4 em each and each row is 2 em that's how I came up with the formula. Yes it is unsupported until we have a better way to have dynamic height.

[ScottDurow]

For a dataset it can be done using flexboxes (Stacks in fluent) - https://www.develop1.net/public/post/2020/05/11/pcf-detailslist-layout-with-fluent-ui

For a form it's a bit more tricky but can be done using CSS e.g. height: calc(100vh - 450px) - but as @ben-thompson says, it will push off components off the bottom of the page if you force the PCF control to fill the viewport height. I'll see if I can do a sample for you.

[ScottDurow · Accepted solution]

Ok - here is a sample of doing this in pure CSS using calc.

https://codepen.io/scottdurow-dev/full/poyLBgB

Notice if you resize the window, the PCF area will resize to match the viewport height. You can then add flexboxes inside that area to fill the space.

https://codepen.io/scottdurow-dev/full/poyLBgB

Hope this helps

[DianaBirkelbach]

Hi @ScottDurow,

That's a good solution for "full height" pcfs. 🙂

At least as long the header and the footer will stay with that height.

Maybe would be good to add also the minHeight in css, since the height shouldn't shrink until the control is not usable anymore.

Thanks for share!

Kind regards,

Diana