RealGrid2 Guide
Style & Theme
Body area styles

body area

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

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

rg-root, rg-grid, rg-table

The grid's top-level style classes determine styles such as default font, color, and row height. The attribute values included in the basic style below select Korean Hangul as the main language.

.rg-root {
   font-family: "Malgun Gothic", "Malgun Gothic", AppleSDGothicNeo-Light, sans-serif;
   font-size: 12px;
   color: #000000;
   /* ... */
}
 
.rg-root .rg-table,
.rg-root .rg-table tr;
.rg-root .rg-table td {
   position: relative;
   margin: 0 !important;
   /* If it is different from 0, automatic row calculation will be incorrect! Set it before the content div!*/
   padding: 0 !important;
   /* If it is different from 0, automatic row calculation will be incorrect! Set it before the content div! */
   border-spacing: 0 !important;
   border-collapse: separate !important;
   box-sizing: border-box !important;
   line-height: 1.5em;
}

rg-empty-grid

Specifies the style of the grid when there is no data in the grid.

.rg-empty-grid {
   display: table;
   padding: 10%;
   background: #ffffff;
   /* Change no data message to blue */
   color: #0000ff;
   font-size: 32px;
   text-align: center;
}

rg-body

Specifies the style for the data display area of the grid. However, because this style class overlaps with several sub-style classes, it is not a good idea to change this class.

The demo below is an example of changing the color of the body area.

.rg-body;
.rg-fixed-body {
   /* Change color of body area */
   background-color: #00f;
}

rg-hscrollbar, rg-vscrollbar

Specifies styles for the horizontal and vertical scrollbar areas. Because there are multiple fragment areas in a scrollbar, you need to be careful when changing the scrollbar's style. Additionally, the scrollbar style includes images in base64 format used in the arrow button portion. This image can also be modified to suit your style.

In the example below, the color of the vertical scrollbar is changed. Check that the color of the horizontal scrollbar and the vertical scrollbar are different.

.rg-vscrollbar .rg-scrollthumb {
   box-sizing: border-box;
   /* Change scrollbar button color */
   background: #0000ff;
   border: 1px solid #b6bbc3;
   border-radius: 0.5em;
   touch-action: none;
   -ms-touch-action: none;
}
 
/* ... */
 
.rg-hscrollbar .rg-scroll-left {
   box-sizing: border-box;
   background: #eeeff1
     url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczL m9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHN0eWxlPSJlbmFibGUtYmFja 2dyb3VuZDpuZXcgMCAwIDE2IDE2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6I0ZGRkZGRjt9LnN0MXtmaWxsOiM2NzY3Njc7fS5zdDJ7Zml sbDojNjlCNjMxO30uc3Qze2ZpbGw6I0ZGQ0MwMjt9LnN0NHtmaWxsOiM5RTcyMTU7fS5zdDV7ZmlsbDojRTU2NjE1O30uc3Q2e2ZpbGw6IzJDM0U1MDt9LnN0N3tmaWxsOiNCM0IzQjM7 fS5zdDh7ZmlsbDojMzQ2QkE5O30uc3Q5e2ZpbGw6I0IyM0EzQTt9LnN0MTB7ZmlsbDojMTcxNzE3O30uc3QxMXtmaWxsOiNGRkZGQjQ7fS5zdDEye2ZpbGw6IzY3QTQ1Qzt9PC9zdHls ZT48Zz48cGF0aCBjbGFzcz0ic3QxIiBkPSJNOS41LDMuOWMwLjIsMCwwLjQsMC4xLDAuNiwwLjJjMC40LDAuMywwLjQsMC43LDAsMS4xTDcuNSw4bDIuNiwyLjdjMC40LDAuNCwwLjQsMC44LDAsMS4xQzEwLDEy LDkuOCwxMi4xLDkuNiwxMi4xYy0wLjIsMC0wLjQtMC4xLTAuNi0wLjJMNS44LDguNUM1LjcsOC40LDUuNiw4LjIsNS42LDhjMC0wLjIsMC4xLTAuNCwwLjItMC42QzcuOSw1LjMsOSw0LjIsOSw0LjJDOS4x LDQsOS4zLDMuOSw5LjUsMy45eiIvPjwvZz48L3N2Zz4=)
     no-repeat 50% 50%;
   border: 1px solid #b6bbc3;
}
User stylesHeader, footer, status bar styles