Dataset PCF using FluentUI: Full Height (100%)

This is a part of my blog “My Checklist for a Dataset PCF using FluentUI“. We saw in the other blog, how to handle the height of a subgrid. But there are a few cases when the height of the grid is defined or we need to fill the whole place available (css 100%). That is the case for:

  • SiteMap (Home Grid)
  • Subgrid in Zoom mode (full size)
  • Grid on the Dashboard
  • Canvas Apps

Since in that case the height of the PCF is defined by the platform runtime, we can work with CSS. I also use the “Stack” which is an abstraction of the flexbox in FluentUI, but basically DIVs would do too. That’s my main structure:

And these are the classes

.ORBIS\.ColorfulOptionsetGrid  .container{
    width: 100%;
    position: relative;
    min-height: 200px ;  
}
.ORBIS\.ColorfulOptionsetGrid  .gridContainer{
    height: 100%;
    overflow-y: auto;
    overflow-x: auto;
    position: relative;
}

In CSS I work with 100% height, and also set “min-height:200px” which stops my grid getting too small; the header, footer and at least 1-2 rows should be visible.

The problem left is to teach the FluentUI DetailsList to have the header always on the top and the footer always on the bottom. The default DetailsList doesn’t work that way:

Scrollable content

In the documentation there is an example of such a DetailsList, but it’s a little hidden. The answer is “ScrollablePane“:

 ScrollablePane is a helper component that’s used with the Sticky component.

It will “stick” to the top or bottom of the scrollable region and remain visible.

In the documentation is stated that the parent should have an “position:relative” that’s why I’ve added that to my “gridContainer” CSS class.

In the ScrolablePane documentation, can also be found an example of DetailsList with Sticky-Header. For that we need to define the DetailsList renderer for the header:

   <DetailsList                                            
        onRenderDetailsHeader={_onRenderDetailsHeader}
         ....
   </DetailsList>

Interesting is how to use the “defaultRenderer“, since I don’t want to create my own content of the header. Magic!

The “onColumnHeaderClick” looks like this:

while the “onColumnClick” is a part of my custom Hook “useColumns”

On click on the header we need to sort the data; this customHook I have already shown in my blog blog about sorting.

The DetailsList has the possibility to define also the renderer for the footer, similar to the renderer for the header. But then I’ve realized that the footer is not staying to the bottom:

That’s why I didn’t used this. I’ve just added another div (Stack) below my DetailsList, and there I call my component for the footer: GridFooter.

The GridFooter component is taking care of paging. I’ll write about that in the next blog post.

5 thoughts on “Dataset PCF using FluentUI: Full Height (100%)

Add yours

  1. Hey Diana, I followed the ScrollablePane example from here https://developer.microsoft.com/en-us/fluentui#/controls/web/scrollablepane and successfully implemented scrolling and sticky header and footer row for my custom fluentui/PCF DetailsList control.
    My control is meant to be used both for listviews and subgrids. While height=100% works perfectly fine for listviews it doesn’t work for subgrids. So I also came to the point where I had to set a min-height. It also seems to be mandatory for the PCF Control Sandbox because otherwise the control gets compressed to only some pixels height.
    Did you maybe test your DetailsList for subgrids? I am looking for a more dynamic way setting the height for DetailsList when replacing the subgrid, but I am afraid there is no such thing due to form limitations. But maybe you have an idea?

  2. Hi Diana, I have read almost all of your articles when I trying to go deep into PCF. They are extremely useful!

    Regarding the height of grid, while I try to set my PCF (basically detaillist) 100%height follow this article, I found it works perfect except it will break the limitation of section. There are some default styles on section like padding and border, if I use Stack with grow in it, the content will break through section make the border across my PCF content.

    Do you have any idea about that? I checked the rendered CSS via developer tool cannot find root cause.

    1. Hi Jerry,
      Thank you for the feedback! 🙂
      I have the feeling that you try to use a DetailList on a form (since you talk about section). If so, for subgrid 100% is not the way to go. For subgrids just let it grow in the height as much as it needs. I have another blog on that: https://dianabirkelbach.wordpress.com/2020/09/12/dataset-pcf-using-fluentui-grid-height/
      You can have a look at my GitHub repository (recently cleaned up a little): https://github.com/brasov2de/ColorfulOptionsetGrid/blob/master/ColorfulOptionsetGrid/App/Generic/Components/GridOverlay.tsx

      Is something like:

      if(isSubgrid && !fullScreen){ //use as much height as the available records need
      DetailsList
      Footer
      }
      else { //make it 100% height
      Stack for height100% (or the height provided in px)
      Stack.Item -> DetailsList
      Stack.Item -> Footer
      }

      Hope it helps! 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Website Powered by WordPress.com.

Up ↑

<span>%d</span> bloggers like this: