Best Practices for Responsive PCF Controls

A PCF control that looks great on a wide monitor can fall apart on a laptop, tablet, or phone — squished columns, clipped buttons, horizontal scrollbars. Since Dynamics 365 runs everywhere, your controls need to adapt. These best practices for responsive PCF controls keep your components looking sharp on every screen.

This article — part of our series on hosting PCF controls in modal popups — gives you a practical checklist for responsive design.

Start With Fluid, Not Fixed

The single biggest win: stop using fixed pixel widths. Use relative units and flexible layouts so the control fills whatever space it’s given.

• Use %, fr (grid), flex, and rem instead of fixed px for layout.
• Let containers grow and shrink with CSS Flexbox or Grid.
• Cap extremes with min-width and max-width.

Track the Available Width From PCF

PCF tells you how much space you have. Ask for it, then render accordingly — for example, switch a multi-column grid to cards when space is tight:

public init(context: ComponentFramework.Context<IInputs>) {
    context.mode.trackContainerResize(true);   // get resize updates
}

public updateView(context: ComponentFramework.Context<IInputs>) {
    const width = context.mode.allocatedWidth;
    const layout = width < 600 ? "compact" : "full";
    this.render(layout);
}

Design for Touch

• Make tap targets at least 44×44 px.
• Add spacing so buttons aren’t accidentally tapped together.
• Avoid hover-only actions — there’s no hover on touch devices.
• Prefer native inputs (date pickers, dropdowns) that mobile handles well.

Use Fluent UI for Consistency

Building your PCF control with Fluent UI React gives you components that already handle responsive behavior, theming, and accessibility — matching the look of Dynamics 365 out of the box. It saves time and keeps your control on-brand.

Test on Real Breakpoints

• Desktop — wide, multi-column layouts.
• Tablet — medium width, touch-friendly.
• Phone — single column, stacked content.
• Test inside a real modal at different dialog sizes, not just full screen.

Performance Is Part of Responsiveness

A control that adapts but loads slowly still feels broken on mobile. Virtualize long lists, lazy-load heavy data, and keep the initial render light so the control appears instantly on any device.

Conclusion

Responsive PCF controls come down to fluid layouts, reacting to allocatedWidth, touch-friendly design, and Fluent UI for consistency — all verified across real breakpoints. Follow this checklist and your controls will feel native whether they open on a monitor, a tablet, or a phone.

Related: Open a PCF Control in a Modal Popup Using Custom Pages. Want polished, responsive controls? Talk to the CloudVerve team.