Panel Layout size
Description
Specify the card size. You can use CSS syntax. Allowed units are: px, in, pt, pc, cm, mm, or a relative size (e.g. flex(2)).
Enable resizing
To turn on panel resizing, check Allow resize in the Panel Size and Dock Options section.
Grip icon and position
Once resizing is enabled, you can choose whether to show a Grip icon and set its position. By default, the position is *50%* (center of the Panel). You can also set absolute offsets, e.g. -200px is 200px from the bottom (for LTR or RTL layouts) or 200px from the right (for TTB or BTT layouts).
Min/max size
You can specify a minimum and maximum size for a Panel (using CSS syntax).
Restore sizes on load
You can restore Panel sizes when the UX loads. Enable this in UX Properties → Advanced.
Event fired on resize
When a Panel is resized, the Panel Layout’s onPanelResize event fires.
Local storage keys and methods
Panel sizes are stored in Local Storage using the key:
PANELLAYOUTSIZES_<UX Component Guid>
The JavaScript methods to store and restore panel sizes are:
{dialog.object}.__storePanelSizes();
{dialog.object}.__restorePanelSizes();The panel resize feature works on touch devices.
A Panel Layout can contain child Panel Cards, Panel Layouts, and Panel Navigators. These child Panels can now be resized. When the UX is reloaded, the sizes of each resized Panel can optionally be restored.
Panel Layout — Resize demo
Download the panelResize.zip component to try the feature in your own workspace.
Click here to download the component.
See Also