Sizing and Styling Controls

Wijmo controls rely on CSS for styling, appearance, and sizing.

Because of this, Wijmo controls don't have properties such as "width," "height," or "background." Styling and layout is handled using CSS. If you are used to .NET controls, including WinForms and XAML, this may feel a little strange at first. But once you get used to CSS, you will find that it is very easy and extremely powerful. You can easily style all instances of a control type, or style a specific control, all with a few lines of extremely re-usable CSS.

Sizing Controls

The size and position of the controls are determined by the hosting element, which follows the usual HTML/CSS rules. For example, the CSS rule below stipulates that elements with class "grid" should have their height calculated automatically to fit the grid content, up to a limit of 300 pixels:

.grid {
    height: auto;
    max-height: 300px;
}

Styling Controls

Control styling follows the same logic as sizing. Use CSS to override fonts, colors, margins, padding, and pretty much any visual aspect of any part of the controls.

.grid {
    height: auto;
    max-height: 350px;
}
.grid .wj-header.wj-cell {
    background-color: #000;
    color: #fff;
    font-weight: bold;
    border-right: solid 1px #404040;
    border-bottom: solid 1px #404040;
}
.grid .wj-cell {
    border: none;
    background-color: #fff;
}
.grid .wj-alt:not(.wj-state-selected):not(.wj-state-multi-selected) {
    background-color: #fff;
}
.grid .wj-state-selected {
    background: #000;
    color: #fff;
}
.grid .wj-state-multi-selected {
    background: #222222;
    color: #fff;
}

The snippet above shows how you can modify the appearance of the FlexGrid control using CSS. Try adding this any one of the FlexGrid samples and you notice that the grid has a plain black and white look.

Some other quick tricks with CSS can be applied to the grid. To change the cell style of the grid, use the "wj-cell" CSS class. The next example simply removes borders from cells and sets their background to white.

.grid .wj-cell {
    border: none;
    background-color: #fff;
}

Code-based Styling

Although the Wijmo controls rely on CSS for layout and sizing, there are a few situations where you may want to use code to get total control of some aspects of a control.

For example, the FlexGrid calculates the row heights based on the font being used to render the control. But you may want to override that CSS-based setting and specify the exact row heights yourself. You can do this by setting the following properties:

// set the height of rows in the scrollable area
flex.rows.defaultSize = 34;
// set the height of rows in the column header area
flex.columnHeaders.rows.defaultSize = 40;