RealGrid2 Guide
Style & Theme
Edit area styles

Edit area

This page explains the ‘Edit’ area among the style areas.

Please refer to the links below for explanations of other areas.

rg-editor-*

You can specify the styles of various default editors that are activated when editing cells in RealGrid.

The demo below is an example of changing the color of the built-in text editor.

.rg-editor-container > input,
.rg-editor-container > textarea {
   /* Change editor color */
   background-color: #0000ff;
   line-height: normal;
   text-align: left;
   color: #000000;
   font:inherit;
   ime-mode: auto;
   cursor: text;
}

rg-dropdown-*, rg-dropdownlist

Dropdown editor also contains several style classes such as rg-dropdownlist, rg-dropdown-item, and rg-dropdown-select, all of which are changeable. do.

The demo below is an example of changing the color of the selection list in the dropdown editor.

.rg-dropdownlist {
   color: #656d7b;
   /* Change dropdown editor color */
   background: #0000ff;
   border: 1px solid #9aa1ac;
   box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.3);
   font-size: 10pt;
   padding: 0px;
   margin: 0px;
}

rg-calendar-*

.rg-calendar {
   font-size: 12px;
   /* Change calendar editor color */
   background: #0000ff;
   border: 1px solid #d2d5da;
   box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.3);
}
Cell, data area stylesstyleName property and callback