Version

CSS Classes Reference (igDialog)

Topic Overview

Purpose

The topic that introduces the user to the igDialog™ control’s CSS classes.

In this topic

This topic contains the following sections:

Introduction to the igDialog for Mobile CSS Classes

This section explains the igDialog CSS classes. You can override all of the styles and create a custom igDialog control layout using the instructions provided.

CSS Classes Reference

The following summarizes the purpose and functionality of the igDialog control’s featured CSS classes:

Classes applied to the main/top element:

ui-igdialog 
ui-dialog 
ui-widget 
ui-widget-content
ui-corner-all

Classes applied to the header:

ui-igdialog-header
ui-dialog-titlebar
ui-widget-header
ui-corner-top
ui-helper-clearfix

Classes applied to the header in the focused state:

ui-igdialog-header-focus
ui-state-focus

Classes applied to the header in the minimized state:

ui-corner-bottom

Classes applied to the header text:

ui-igdialog-headertext
ui-dialog-title

Extra class applied to SPAN which represents an image in the header, when the "image" option is set:

ui-igdialog-headerimage

Classes applied to the header text when a dialog is in its minimized state:

ui-igdialog-headertext-minimized

Classes applied to the buttons located in the header:

ui-igdialog-headerbutton
ui-corner-all
ui-state-default

Classes applied to the buttons located in the header when a mouse is moved over them:

ui-igdialog-headerbutton-hover
ui-state-hover

Classes applied to the close button located in the header:

ui-igdialog-buttonclose

Classes applied to the minimize button located in the header:

ui-igdialog-buttonminimize

Classes applied to the maximize button located in the header:

ui-igdialog-buttonmaximize

Classes applied to the pin button located in the header:

ui-igdialog-buttonpin

Classes applied to the icon of the close button:

ui-igdialog-close-icon 
ui-icon ui-icon-close

Classes applied to the icon of the minimize button:

ui-igdialog-minimize-icon
ui-icon
ui-icon-minus

Classes applied to the icon of the maximize button:

ui-igdialog-maximize-icon
ui-icon
ui-icon-extlink

Classes applied to the icon of the restore button:

ui-igdialog-restore-icon
ui-icon
ui-icon-copy

Classes applied to the icon of the pin button:

ui-igdialog-pin-icon
ui-icon
ui-icon-pin-s

Classes applied to the icon of the unpin button:

ui-igdialog-unpin-icon
ui-icon
ui-icon-pin-w

Classes applied to the footer:

ui-igdialog-footer
ui-widget-header
ui-corner-bottom
ui-helper-clearfix

Classes applied to the dialog while resizing:

ui-igdialog-resizing

Classes applied to the dialog while dragging:

ui-igdialog-dragging

Classes applied to the header when the dialog is in an unmovable state such as maximized or pinned:

ui-igdialog-unmovable

Classes applied to the shell element when the dialog is in a modal state:

ui-igdialog-overlay
ui-widget-overlay

Classes applied to the content area of the dialog:

ui-igdialog-content
ui-widget-contentui-dialog-content

Related Content

Topics

The following topics provide additional information related to this topic:

View on GitHub