Editor CSS API Reference

All Common CSS variables:

  • --jqx-primary: The theme primary color.
  • --jqx-primary-color: Text color on top of a primary background.
  • --jqx-secondary: The theme secondary color.
  • --jqx-secondary-color: Text color on top of a secondary background.
  • --jqx-error: The theme error color.
  • --jqx-error-color: Text color on top of a error background.
  • --jqx-success: The theme success color.
  • --jqx-success-color: Text color on top of a success background.
  • --jqx-background: The theme background color. The background color appears behind scrollable content.
  • --jqx-background-color: Text color on top of a background background.
  • --jqx-surface: The theme surface color. Surface colors affect surfaces of components, such as cards, sheets, and menus.
  • --jqx-surface-color: Text color on top of a surface surface.
  • --jqx-disabled: The theme primary color in disabled state.
  • --jqx-disabled-color: Text color on top of a theme background in disabled state.
  • --jqx-font-size: Theme font-size.
  • --jqx-font-family: Theme font-family.
  • --jqx-border-width: Theme border-width.
  • --jqx-border-radius: Theme border-radius.
  • --jqx-border: The theme border settings.
  • --jqx-outline: The theme border color.
  • --jqx-arrow-size: Font size of the arrow elements.
  • --jqx-editor-selection: Background color of the selected text.
  • --jqx-editor-selection-color: Color of the selected text.
  • --jqx-alternation-index0-color: Alternation color for index0.
  • --jqx-alternation-index0-border-color: Alternation border color for index0.
  • --jqx-alternation-index0-background: Alternation background color for index0.
  • --jqx-alternation-index1-color: Alternation color for index1.
  • --jqx-alternation-index1-border-color: Alternation border color for index1.
  • --jqx-alternation-index1-background: Alternation background color for index1.
  • --jqx-alternation-index2-color: Alternation color for index2.
  • --jqx-alternation-index2-border-color: Alternation border color for index2.
  • --jqx-alternation-index2-background: Alternation background color for index2.
  • --jqx-tick-color: Default tick color for jqxTank, jqxSlider and jqxGauge.
  • --jqx-tick-label-color: Default tick label color for jqxTank, jqxSlider and jqxGauge.
  • --jqx-box-height: Default height for Dialog, Gauge, Accordion, Tabs, Tree, Array.
  • --jqx-box-width: Default width for Dialog, Gauge, Accordion, Tabs, Tree, Array.
  • --jqx-bar-height: Default height for headers and footers.
  • --jqx-bar-width: Default width for headers and footers.
  • --jqx-editor-height: Default height for editors.
  • --jqx-editor-width: Default width for editors.
  • --jqx-editor-drop-down-width: Default width for editors drop-down.
  • --jqx-editor-drop-down-height: Default height for editors drop-down.
  • --jqx-editor-label-padding: Default padding for inputs.
  • --jqx-editor-addon-width: Default width for spin buttons, dropdown buttons.

Specific CSS variables for Editor styling:

  • --smart-editor-default-width: Default width for the Smart.Editor.
  • --smart-editor-default-height: Default height for the Smart.Editor.
  • --smart-editor-input-min-height: Input area min height for the Smart.Editor.
  • --smart-editor-padding: Input area Padding for the Smart.Editor.
  • --smart-editor-toolbar-item-margin: Toolbar items margin.
  • --smart-editor-toolbar-button-width: Toolbar items width.
  • --smart-editor-toolbar-delimiter-width: Toolbar delimiter item width.
  • --smart-editor-toolbar-drop-down-width-large: large drop down toolbar items width. Used for the following toobar items: 'fontName', 'formats'.
  • .
  • --smart-editor-toolbar-drop-down-width-small: small drop down toolbar items width. Used for the every toobar item of type 'color-input' and 'drop-down', except the following: 'fontName', 'formats'.
  • --smart-editor-toolbar-item-height: Toolbar item height
  • --smart-editor-toolbar-item-border-radius: Toolbar item border radius
  • --smart-editor-toolbar-height: Toolbar height
  • --smart-editor-window-header-height: Editor Dialog window header height.
  • --smart-editor-window-footer-height: Editor Dialog window footer height.
  • --smart-editor-inline-toolbar-max-width: Inline Toolbar max width.
  • --smart-editor-table-column-width: Default width for table columns.
  • --smart-editor-table-cell-min-height: Min height for table cells.
  • --smart-editor-table-cell-min-width: Min width for table cells
  • --smart-editor-chart-counter-offset: Char counter default offset from the borders of the element.