Announcements
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
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
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.
If this is for a dataset control then look at my PCF Control.
https://github.com/Power-Maverick/PCF-Controls/blob/master/HoverDetailsList/HoverDetailsListControl/index.ts
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 MaverickMVP Business ApplicationsIf this post helps, then please consider Accept it as the solution to help the other members.
@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?
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.
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.
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.
Hope this helps
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!
Under review
Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.
Congratulations to our 2026 Super Users!
Congratulations to our 2025 community superstars!
These are the community rock stars!
Stay up to date on forum activity by subscribing.
WarrenBelz 279 Most Valuable Professional
Kalathiya 229 Super User 2026 Season 1
VASANTH KUMAR BALMADI 195
