ResponsivePane
For example, if you add 4 ResponsivePanes to a FlowPane and set the Max Width property for each ResponsivePane to 25%. The ResponsivePane will adjust the width of each to try to fit the 4 children on the same row. The last child ResponsivePane will adjust in size from its Max Width to Min Width value to try to fit on the row, but if there is not enough space for the specified Min Width, the FlowPane will let that child wrap to the next row.
Figure 101. Responsive Panes in PxEditor and Widget Tree Pane
Examples folder that contains pre-configured FlowPanes and CanvasPanes to help you start designing mobile-friendly px pages.
ResponsivePane is available in the bajaui palette.
Figure 102. Example ResponsivePane Properties Pane
| Property | Value | Description |
|---|---|---|
| Visible | true (default) or false |
Sets the table to be visible in the Px page interface (
true) or not (false).
|
| Enabled (Px graphics) | true (default) or false |
Determines if the table on a Px page can receive a command.
|
| Layout | additional properties | See following section, Layout properties. |
| Content | additional properties | The Content property is a container for an added widget. It reflects properties of the widget that is added to the pane. |
| Max Width | value, and units | Specifies the maximum width of the ResponsivePane. Max Width dimension defaults to the preferred size of the widget inserted in Content, but can be changed for better flow layout. Unit type can be Absolute, Percent, or Preferred. |
| Min Width | value, and units | Specifies the minimum width of the ResponsivePane. Min Width dimension defaults to 20.0 (pixels) Abs, but should be customized to the smallest desired width for the widget inserted in Content. Unit type can be Absolute (pixels), Percent, or Preferred. |
| Force New Row | true or false (default)
|
Forces the ResponsivePane to wrap to the next row in the parent container. This ensures a widget starts on a new row, which allows setting up different sections like header, footer, etc., in a FlowPane |
Layout properties
The Layout property, visible in a Property Sheet view of the component, allows you to set positioning coordinates and dimensions for the pane.
| Name | Value | Description |
|---|---|---|
| X | 0.00 | Provides the horizontal X-coordinate for absolute positioning of the pane. Units are either Abs (default) or Percent. |
| Y | 0.00 | Provides the vertical Y-coordinate for absolute positioning of the pane. Units are either Abs (default) or Percent. |
| Width | 100.00 | Provides the width dimension of the pane in pixels. Units specify either an absolute value, a percentage, or a preferred value:Abs(default) orPercent, orPref. |
| Height | 100.00 | Provides the height dimension of the pane in pixels. Units specify either an absolute value, a percentage, or a preferred value:Abs(default) orPercent, orPref. |
| Fill | checkbox | When Fill is selected all widgets in a given row are sized to fill the row height. When deselected the widgets in a given row use their preferred height and alignment. |