knowledgecenter-breadcrum

Knowledge Center

15 Mar, 2022

How to make a Detail List scrollable?

Posted on 15 Mar, 2022 by Admin, Posted in Dynamics 365 Dynamics-365 Sales

How to make a Detail List scrollable? Blogs

How to make a DetailList scrollable?

Introduction

Recently, we created a DetailList type of PCF control to display some data.

As this list was going to display hundreds of records, we couldn’t scroll through them as there was no scroller present.

Solution

After a bit of research we found that a scroller can be added by importing “ScrollablePane” component from Fluent UI library using the below command:

import { ScrollablePane, ScrollbarVisibility } from ‘office-ui-fabric-react’;

We add the ScrollablePane tag just above our DetailList tag as shown below.

After building the PCF control, now we can see that our list is scrollable.

Jan 2022 blog 2 gif

Links

Comment

This is a Required Field

Loading

Recent Updates

Blogs
31 Mar, 2026

Debugging Power Pages Server Logic Using Visual Studio Code

Power Pages Server Logic allows developers to execute secure backend JavaScript directly within Power Pages. It is commonly used for…

READ MORE
Blogs
31 Mar, 2026

Create and Deploy a Single Page Application (SPA) in Power Pages

In this blog, we’ll build and deploy a Single Page Application (SPA) using React + Vite and host it on…

READ MORE
BuildAndDeployPCF_Thumbnail.png
Blogs
25 Mar, 2026

Build And Deploy Your First Dataset PCF Control In Dynamics 365

Introduction In Dynamics 365, subgrids are commonly used to display related records, such as Opportunities under an Account. While out-of-the-box…

READ MORE