Skin form — Components tab — General — Modal dialogs
Styles set here apply to the border and window size of modal dialogs. The implementation and CSS classes for modal formats differs, depending upon whether your application is rendered in HTML5 document type - standards mode or in quirks mode. See Displaying a modal dialog in a custom format created in the skin on the Pega Community.
A preview of the currently selected format displays to the right. You can also preview formats by selecting Actions > Launch in the toolbar and then choosing one of the following preview options: Run Process, Open Portal, Harness Preview, UI Gallery Preview, Skin Preview. In the Skin Preview, select the Controls tab and click Open Modal.
Border
| Use mixin | If desired, you can specify the Top , Left , Right , or Bottom border as none, solid, dashed, or dotted, rather than inheriting the style from the selected mixin. |
| Specify styles |
Select to define a custom border:
|
Rounded corners
Depending upon whether your application is rendered in quirks or standards mode (HTML5 document type), rounded corners are implemented differently. Applications built in Pega Platform automatically render in the HTML5 document type. This ensures cross-browser and cross-platform compatibility and use of the latest HTML markup.
If your application is rendered using:
- HTML5 document type (standards mode), rounded corners are implemented using CSS3. This means that you can define the curve of rounded corners by specifying the x (hortizontal) and y (vertical) radii of the quarter ellipse that makes the rounded corner of the modal dialog. You can use px, em, or % to determine the curve of the corner.
- quirks mode: rounded corners are not implemented using CSS3 and are not configurable. Configuration settings are ignored when rendering the modal dialog.
| enable rounded corners(HTML5 only) | Select this check box if you want the modal dialog border to have rounded corners. You can select this option when using a Style mixin or a custom border. |
| same for all corners | Select to use the rounded corner settings that you specify in the Unit and Radius fields for all four corners or clear to specify the length of the x and y axis for the Top Left , Top Right , Bottom Left , and Bottom Right . |
| same x and y axis radii | Select to specify x and y radii of the same length. If you clear this check box, specify the length of the x and y axis for the Top Left , Top Right , Bottom Left , and Bottom Right . |
| Unit | Select to define the unit of measurement for the rounded corner settings: pixels ( px ), percentage ( % ), or em (the current font size). |
| Radius | Define the curve of rounded corners by specifying the x (hortizontal) and y (vertical) radii of the quarter ellipse that makes the rounded corner of the modal dialog. Displays when same for all corners is selected. |
Window size
Specifies the window size of the modal dialog. If your application is rendered in HTML5 document type – standards mode, modal dialogs honor the design time width of the layout, while, in quirks mode, modal dialogs shrink to the minimum width and height possible, regardless of the settings specified here.
| min-height | Accept the default, auto, in which the modal dialog is automatically sized or select custom to specify the minimum height of the modal dialog in pixels ( px ) or percentage ( % ). |
| min-width | Accept the default, auto, in which the modal dialog is automatically sized or select custom to specify the minimum width of the modal dialog in pixels ( px ) or percentage ( % ). |
- Component styles (custom style formats)
Use the Component styles tab to define the presentation of components by creating custom style formats. After you define style formats, reference them on property panes for sections, harnesses, and controls.
Previous topic Skin form — Components tab — General — Modal dialogs Next topic Skin form — Components tab — General — Overlays