<h2>
    Sizing and Styling Controls</h2>
<p>
    Wijmo controls rely on CSS for styling, appearance, and sizing.</p>
<p>
    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
    <b>WinForms</b> and <b>XAML</b>, 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.</p>

<h3>
    Sizing Controls</h3>
<p>
    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:</p>
<pre>.grid {
    height: auto;
    max-height: 300px;
}</pre>
<p>
    The fiddle below shows how this rule affects two <b>FlexGrid</b> controls. The 
    first grid has only a few items, so it is resized to fit its content (like a 
    regular HTML table).
    The second grid has a lot more items, so its height is automatically set to 300 
    pixels and it becomes scrollable.</p>
<p>
  <div class="member-panel example">
    <h3 class="node collapsed">
      Example: Sizing Controls
    </h3>
    <div class="fiddle">
      <script async src="http://jsfiddle.net/Wijmo5/J4zME/embed/result,html,js,css"></script>
    </div>
  </div>
</p>

<p>
    The first grid has only five elements to show. Since that requires less than 
    300 pixels, the grid shows all elements and doesn't need scrollbars. The second
    grid contains 10,000 items. That exceeds 300 pixels, so the grid becomes 
    scrollable.</p>

<h3>
    Styling Controls</h3>
<p>
    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.</p>
<p>
    For example, this fiddle shows how you can modify the appearance of the
    <b>FlexGrid</b> control using CSS:</p>
<p>
  <div class="member-panel example">
    <h3 class="node collapsed">
      Example: Styling Controls
    </h3>
    <div class="fiddle">
      <script async src="http://jsfiddle.net/Wijmo5/3L8Cf/embed/result,html,js,css"></script>
    </div>
  </div>
</p>
<p>
    Notice how now the grids now have a plain black and white look. To do this, 
    we change the CSS and specify the styles for elements <b>within</b> the grid.
    Wijmo controls assign class names to their constituent elements, which enables
    easy and flexible styling.</p>
<p>
    For example, the CSS below creates cell elements (elements with class "wj-cell" 
    contained in elements with class "grid") with no border and a white
    background:</p>
<pre>.grid .wj-cell {
    border: none;
    background-color: #fff;
}
</pre>

<h3>
    Code-based Styling</h3>
<p>
    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.</p>
<p>
    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:</p>
<pre>
// 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;
</pre>
<p>
    This is shown in the fiddle below, which also uses CSS to achieve a very
    specific, customized look for the grid. The fiddle uses the "initialized"
    event to get a reference to the FlexGrid control. This is a convenient way
    to get a reference to the control when it is created with markup.</p>
<p>
  <div class="member-panel example">
    <h3 class="node collapsed">
      Example: Code-based Styling
    </h3>
    <div class="fiddle">
      <script async src="http://jsfiddle.net/Wijmo5/kzrutyj9/embed/result,html,js,css"></script>
    </div>
  </div>
</p>

