docs(common): update dimensions for string properties

Author: marin-bratanov

common-features/dimensions.md

@@ -0,0 +1,22 @@
+---
+title: Dimensions
+page_title: Dimensions
+description: How dimensions work and are set in the Telerik UI for Blazor component suite
+slug: common-features/dimensions
+tags: telerik,blazor,dimensions,width,height,percent,pixel
+published: True
+position: 3
+---
+
+# Dimensions
+
+This article explains how dimensional properties like `Width` and `Height`, `Top` and `Left` work in the Telerik UI for Blazor suite to set size and position.
+
+Properties that denote **dimensions and positions are** simple **string properties** that are not parsed by our code. You can provide **valid CSS values** to them. For example, `100px` or `50%` are valid options. This provides you with flexibility without limiting options. At the time of writing there is no `Unit` type in the underlying framework.
+
+The string you provide is usually rendered within an inline `style` attribute, so you must make sure to provide a valid value that will not break other options. You do not need to include a semicolon (`;`).
+
+For elements with **special positioning** (`Top` and `Left` properties), keep in mind that if the parent elements have special CSS positioning, it will affect the position of the component. If you experience issues, inspect the rendered HTML to see what elements are present and what their CSS rules are.
+
+When setting **percentage values** (such as `100%` or `50%`), keep in mind the following - according to the web standards, elements which have their height set in percentage require that the height of their parent is also explicitly set. This requirement applies recursively until either an element with a pixel height or the html element is reached. Elements that are 100% high should not have margins, paddings, borders, or sibling elements.
+

components/animationcontainer/overview.md

@@ -20,7 +20,7 @@ To use the animation container, add the `TelerikAnimationContainer` tag.
 @using Telerik.Blazor.Components.AnimationContainer
 @using Telerik.Blazor.Components.Button
 
-<TelerikAnimationContainer Top="300" Width="100" Height="100" Visible="@Shown" AnimationType="AnimationType.ZoomOut" Class="k-popup">
+<TelerikAnimationContainer Top="300px" Width="100px" Height="100px" Visible="@Shown" AnimationType="AnimationType.ZoomOut" Class="k-popup">
 	My content goes here. The "k-popup" class adds some background and borders which you can define through your own styles instead.
 </TelerikAnimationContainer>
 
@@ -64,7 +64,7 @@ The animation container exposes the following properties:
 @using Telerik.Blazor.Components.AnimationContainer
 @using Telerik.Blazor.Components.Button
 
-<TelerikAnimationContainer Top="300" Width="100" Height="100" Visible="@Shown" AnimationType="@AnimType" Class="my-popup">
+<TelerikAnimationContainer Top="300px" Width="100px" Height="100px" Visible="@Shown" AnimationType="@AnimType" Class="my-popup">
 	My content goes here.
 </TelerikAnimationContainer>
 

components/dateinput/overview.md

@@ -64,7 +64,7 @@ The date input provides the following features:
 * `Format` - the date format that the user input must match.
 * `ParsingErrorMessage` - a hint that is displayed to the user through validation when their input cannot be parsed in the required format
 * `Value` - get/set the value of the input, can be used for binding.
-* `Width` - the width of the `input` in pixels.
+* `Width` - the width of the `input`. See the [Dimensions]({%slug common-features/dimensions%}) article.
 * Validation - see the [Input Validation]({%slug common-features/input-validation%}) article.
 
 

components/datepicker/overview.md

@@ -61,13 +61,13 @@ The Date Picker component exposes the following features:
 *  `BottomView` - Defines the bottommost view in the popup calendar to which the user can navigate to. Defaults to `CalendarView.Month`.
 * `DisabledDates` - Specifies a list of dates that can not be selected.
 * `Enabled` - Specifies whether typing in the input is allowed.
-* `Height` - Defines the height of the DatePicker. Defaults to 28.
+* `Height` - Defines the height of the DatePicker. Defaults to `28px`. See the [Dimensions]({%slug common-features/dimensions%}) article.
 * `Format` - Specifies the format of the DateInput of the DatePicker. Defaults to `yyyy-MM-dd`.
-* `PopupHeight` - Defines the height of the DatePicker's Popup. Defaults to 280;
-* `PopupWidth` - Defines the width of the DatePicker's Popup. Defaults to 320.
+* `PopupHeight` - Defines the height of the DatePicker's Popup. Defaults to `280px`.
+* `PopupWidth` - Defines the width of the DatePicker's Popup. Defaults to `320px`.
 * `Value` - The current value of the input. Can be used for binding.
 * `View` - Specifies the current view that will be displayed in the popup calendar.
-* `Width` - Defines the width of the DatePicker. Defaults to 280.
+* `Width` - Defines the width of the DatePicker. Defaults to `280px`.
 * Validation - see the [Input Validation]({%slug common-features/input-validation%}) article.
 
 The date picker is, essentially, a [date input]({%slug components/dateinput/overview%}) and a [calendar]({%slug components/calendar/overview%}) and the properties it exposes are mapped to the corresponding properties of these two components. You can read more about their behavior in the respective components' documentation.

components/dropdownlist/overview.md

@@ -82,8 +82,8 @@ The DropDownList provides the following features:
 * `Data` - allows you to provide the data source. Required.
 * `DefaultItem` - sets the hint that is shown if no other item is selected. Set this property to an instance of the model class to which the dropdown is bound.
 * `Enabled` - whether the component is enabled.
-* `Height` - the height of the main element in pixels.
-* `PopupHeight` - the height of the expanded dropdown list element in pixels.
+* `Height` - the height of the main element. See the [Dimensions]({%slug common-features/dimensions%}) article.
+* `PopupHeight` - the height of the expanded dropdown list element.
 * `T` - the type of the model to which the component is bound. Required. Determines the type of the reference object.
 * `TItem` - the type of the value field from the model to which the component is bound. Required. Determines the type of the reference object.
 * `TabIndex` - the `tabindex` attribute rendered on the dropdown.
@@ -98,7 +98,7 @@ The DropDownList provides the following features:
     * `Guid`
     * `Enum`
 
-* `Width` - the width of the dropdown in pixels.
+* `Width` - the width of the dropdown and the main element.
 * Templates - they allow you to control the rendering of items in the component. See the [Templates]({%slug components/dropdownlist/templates%}) article for more details.
 * Validation - see the [Input Validation]({%slug common-features/input-validation%}) article for more details.
 

components/grid/columns/bound.md

@@ -18,7 +18,7 @@ They are added to the `TelerikGridColumns` tag and are of type `TelerikGridColum
 * `Title` - the text that is rendered in the column header.
 * `Editable` - you can set this property to `true` or `false` to allow or prevent [editing]({%slug components/grid/overview%}#editing) of this field. Defaults to `true`.
 * `Filterable` - you can set this to `false` so a [filterable]({%slug components/grid/filtering%}) grid will not let the user filter that particular column.
-* `Width` - the width of the column in pixels.
+* `Width` - the width of the column. See the [Dimensions]({%slug common-features/dimensions%}) article. Keep in mind that these are columns in a `<table>`, so it is often a good practice to leave one column without explicit dimensions so it can accommodate the remaining width and changes to the container size.
 * `Template` - this property can also be used as an inner tag and it lets you define the [column display content]({%slug components/grid/features/templates%}#column-template). It can also point to a component name.
 * `Context` - the standard Blazor context variable name for use inside the inline template.
 * `ref` - the standard Blazor reference name.

components/grid/overview.md

@@ -128,7 +128,7 @@ The grid can filter data automatically. You can read more about thsi feature in
 
 You can define your own content for column cells or even the entire row through [Templates]({%slug components/grid/features/templates%}).
 
-You can also set the `Height` of the grid in pixels, and you can use the `Class` to provide more complex CSS rules (like ones that will be inherited in a template).
+You can also set the [`Height` of the grid]({%slug common-features/dimensions%}), and you can use the `Class` to provide more complex CSS rules (like ones that will be inherited in a template).
 
 ## Toolbar
 

components/textbox/overview.md

@@ -60,7 +60,7 @@ The numeric textbox provides the following features:
 * `MinLength` - the minimum length of the text input by the user.
 * `Pattern` - the pattern that the user input must match.
 * `Value` - get/set the value of the input, can be used for binding.
-* `Width` - the width of the `input` in pixels.
+* `Width` - the width of the `input`. See the [Dimensions]({%slug common-features/dimensions%}) article.
 * Validation - see the [Input Validation]({%slug common-features/input-validation%}) article.
 
 The length, enabled and pattern attributes are HTML attributes on the `<input />` element and it is up to the browser to honor them. For example, the `minlength` attribute is rarely taken into account, and the pattern is usually evaluated only upon form submission.

components/window/position.md

@@ -12,15 +12,15 @@ position: 2
 
 The Window offers two ways for you to control its position:
 
-* the `Top` and `Left` integer properties
+* the [`Top` and `Left` properties]({%slug common-features/dimensions%})
 * the `Centered` boolean property
 
 >caption Set Top and Left offset to the Window
 
 ````CSHTML
 @using Telerik.Blazor.Components.Window
 
-<TelerikWindow Top="50" Left="100" Visible="true">
+<TelerikWindow Top="50px" Left="100px" Visible="true">
 	<TelerikWindowTitle>
 		<strong>The Title</strong>
 	</TelerikWindowTitle>

components/window/size.md

@@ -12,15 +12,15 @@ position: 1
 
 The Window offers two ways for you to control its size:
 
-* the `Width` and `Height` integer properties
+* the [`Width` and `Height` properties]({%slug common-features/dimensions%})
 * predefined dimensions through the `Size` property
 
 >caption Set Width and Height to a Window
 
 ````CSHTML
 @using Telerik.Blazor.Components.Window
 
-<TelerikWindow Width="600" Height="400" Visible="true">
+<TelerikWindow Width="600px" Height="400px" Visible="true">
 	<TelerikWindowTitle>
 		<strong>The Title</strong>
 	</TelerikWindowTitle>