cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Frequent Visitor

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

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

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Super User
Super User

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

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

 

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

ResizePCF.gif

 

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

View solution in original post

8 REPLIES 8
Highlighted
Super User
Super User

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

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

Highlighted
Solution Sage
Solution Sage

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

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 post has answered your question please consider it for "Accept as Solution" or if it has been helpful give it a "Thumbs Up".
Highlighted

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

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.

Highlighted
Super User
Super User

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

@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

 

Highlighted

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

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.

Highlighted
Super User
Super User

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

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.

Highlighted
Super User
Super User

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

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

 

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

ResizePCF.gif

 

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

View solution in original post

Highlighted
Super User
Super User

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

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

Helpful resources

Announcements
Community Conference

Power Platform Community Conference

Check out the on demand sessions that are available now!

Watch Now

Experience what’s next for Power Apps

See the latest Power Apps innovations, updates, and demos from the Microsoft Business Applications Launch Event.

Power Platform ISV Studio

Power Platform ISV Studio

ISV Studio is designed to become the go-to Power Platform destination for ISV’s to monitor & manage published applications.

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Users online (7,195)