Sizing

Sizing Utility

The Size struct provides a way to specify some predefined sizes for components. You can also use the struct to specify an absolute size in pixels.

Predefined Constants

Examples

Code examples for how to use the Size struct. In these examples we use a Div component, but the same principles apply to any component derived from the BootstrapComponentBase component.

Percentual Size

You can specify the width and height of a component percentually as 25%, 50%, 75% and 100%. There is also an Auto option.

<Div Width="Size.P50">
    The width of this div is 50% of the available width.
</Div>

<Div Height="Size.P25">
    The height of this div is 25% of the height of the containing
    parent.
</Div>

Absolute Size

You can also use absolute pixel sizes for your components, as shown in the samples below.

<Div Width="480">
    This div will be 480px wide.
</Div>

<Div Height="200">
    This div is 200px high.

    <Div Height="Size.P50">
        The height of this div will be 50% of the
        parent's height, i.e. 100px.
    </Div>
</Div>

Shortcuts

The Size struct defines the following constants that you can use as described in the samples above.

• Size.P25
• Size.P50
• Size.P75
• Size.P100
• Size.Auto

You can also use a numeric value instead of these constants. A numeric value less than or equal to 1 represents a percentual value as described below.

• .25 -> Size.P25
• .5 -> Size.P50
• .75 -> Size.P75
• 1 -> Size.P100

If you specify a value greater than 1, it will be considered as an absolute pixel size and added to the inline styles of the component.

<Div Width=".5">
    The width of this div will be 50% of its container.
</Div>

<Div Height="240">
    This div will be 240px heigh because the height is considered
    to be a pixel value and added to the produced HTML element's
    style attribute.
</Div>