CODEWITHSUNDEEP
office-ui-fabric
dimi
dimi

Reputation: 13

Office UI Frabric Responsive Pivot

I'm new to Office UI Fabric. The Pivot component doesn't seem to behave responsively by default. What would be the recommended way to deal with the Pivot component on small screens? I couldn't find any wrapping features. I tried to figure out if other components like OverflowSet & ResizeGroup could help. However, they don't seem to be the right solution for the Pivot either. Any suggestions are welcome.

Upvotes: 1

Views: 1075

Answers (1)

Micah Godbolt
Micah Godbolt

Reputation: 224

I don't think the pivot was ever intended for responsive scenarios (there certainly isn't behavior baked in). But you could use ResizeGroup to modify your pivots if they don't fit. You might truncate text, reduce padding or switch to a dropdown.

Switching to dropdown might be the best idea. Just have a flag in your data that says "renderAsDropdown" and your reduceData just flips 'renderAsDropdown" to true, and your 'onRenderData' just renders a dropdown or a set of pivots. No need to calculate some breakpoint.

Upvotes: 1

Related Questions