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
27 Feb, 2026

How to Use Parameters in Power BI to Connect to Microsoft Dataverse

When working with multiple environments in Microsoft Dataverse (DEV, TEST, PROD), hardcoding the environment URL inside Power BI Desktop creates…

READ MORE
Blogs
25 Feb, 2026

Power Apps Production Deployment Checklist: Best Practices for a Smooth Go-Live

Introduction In Power Apps, even a small mistake during deployment can impact users and business processes. This checklist will help…

READ MORE
PCF Ribbon Button Thumbnail
Blogs
16 Feb, 2026

Launching a PCF Control from a Ribbon Button using Custom Pages in Dynamics 365

Introduction: In Model-driven apps, PCF controls are typically embedded inside forms or views. However, unique business requirements often demand more…

READ MORE