Sizing
Sizing utility CSS classes for width and height can be used to control the overall layout of elements.
Width percentage CSS classes link
You can use the predefined utility classes for width of 25%, 50%, 75%, 100%.
Width keyword CSS classes link
There are width keyword values exposed as CSS classes such as fit-content, min-content, max-content, and stretch.
Width viewport CSS classes link
These are viewport width values exposed as CSS classes.
Max-width and min-width CSS classes link
Use these CSS classes to set desired minimum and maximum width class="rz-min-w-100".
| Width value | Width CSS class | Min-width CSS class | Max-width CSS class |
|---|---|---|---|
| 25% | .rz-w-25 | .rz-min-w-25 | .rz-max-w-25 |
| 50% | .rz-w-50 | .rz-min-w-50 | .rz-max-w-50 |
| 75% | .rz-w-75 | .rz-min-w-75 | .rz-max-w-75 |
| 100% | .rz-w-100 | .rz-min-w-100 | .rz-max-w-100 |
Height percentage CSS classes link
You can use the predefined utility classes for height of 25%, 50%, 75%, 100%.
Height viewport CSS classes link
These are viewport height values exposed as CSS classes.
Max-height and min-height CSS classes link
Use these CSS classes to set desired minimum and maximum height class="rz-min-h-100".
| Height value | Height CSS class | Min-height CSS class | Max-height CSS class |
|---|---|---|---|
| 25% | .rz-h-25 | .rz-min-h-25 | .rz-max-h-25 |
| 50% | .rz-h-50 | .rz-min-h-50 | .rz-max-h-50 |
| 75% | .rz-h-75 | .rz-min-h-75 | .rz-max-h-75 |
| 100% | .rz-h-100 | .rz-min-h-100 | .rz-max-h-100 |
Supercharge your Blazor development with Radzen Blazor Studio
Radzen Blazor Studio is a software development environment that empowers developers to design, build and deploy Blazor applications without the traditional hurdles. Write less code and get more done.
Radzen Blazor Components, © 2018-2024 Radzen.
Source Code licensed under
MIT