Element: <oj-dialog>

Oracle® JavaScript Extension Toolkit (JET)
16.0.0

F83703-01

DOM Interface: DialogElement

Version:
  • 16.0.0
Since:
  • 0.6.0
Class that works with the oj-dialog-footer class to specify a separator between the dialog body and the dialog footer.
This class should be applied to the div that specifies slot="footer" for the dialog.
Note that for themes that have a built-in footer separator (specifically the iOS theme), this class has no effect.
.oj-dialog-title
Class used to format the dialog title. Automatically created headers use oj-dialog-title to format the title.
For user-defined headers, you may want to use the oj-dialog-title class so that the title in your user-defined header is stylistically similar to a default title.
.oj-focus-highlight
Under normal circumstances this class is applied automatically. It is documented here for the rare cases that an app developer needs per-instance control.

The oj-focus-highlight class applies focus styling that may not be desirable when the focus results from pointer interaction (touch or mouse), but which is needed for accessibility when the focus occurs by a non-pointer mechanism, for example keyboard or initial page load.

The application-level behavior for this component is controlled in the theme by the $focusHighlightPolicy SASS variable; however, note that this same variable controls the focus highlight policy of many components and patterns. The values for the variable are:

nonPointer: oj-focus-highlight is applied only when focus is not the result of pointer interaction. Most themes default to this value.
all: oj-focus-highlight is applied regardless of the focus mechanism.
none: oj-focus-highlight is never applied. This behavior is not accessible, and is intended for use when the application wishes to use its own event listener to precisely control when the class is applied (see below). The application must ensure the accessibility of the result.

To change the behavior on a per-instance basis, the application can set the SASS variable as desired and then use event listeners to toggle this class as needed.
.oj-progress-bar-embedded
Optional class used to format a progress bar when embedded in the dialog.

CSS Variables

See JET CSS Variables for additional details.
Name Type Description
--oj-dialog-border-radius <length> | <percentage> Dialog border radius
--oj-dialog-bg-color <color> Dialog background color
--oj-dialog-border-color <color> Dialog border color
--oj-dialog-box-shadow Dialog box shadow
--oj-dialog-header-bg-color <color> Dialog header background color
--oj-dialog-header-border-color <color> Border color between the dialog header and body
--oj-dialog-header-padding <length> Dialog header padding
--oj-dialog-body-padding <length> Dialog body padding
--oj-dialog-footer-padding <length> Dialog footer padding
Title
Name Type Description
--oj-dialog-title-font-size <length> Dialog title font size
--oj-dialog-title-line-height <number> Dialog title line height
--oj-dialog-title-font-weight <font_weight> Dialog title font weight
--oj-dialog-title-text-color <color> Dialog title text color
Cancel icon
Name Type Description
--oj-dialog-cancel-icon-margin-top <length> Dialog cancel icon margin top
--oj-dialog-cancel-icon-margin-end <length> Dialog cancel icon margin end