docs(dropdowns): automatic width calculation

Author: marin-bratanov

components/autocomplete/overview.md

@@ -47,24 +47,42 @@ User input: @TheValue
 
 The AutoComplete is a generic component and its type is determined by the type of the model you use as its data source. You can find examples in the [Data Bind - Considerations]({%slug autocomplete-databind%}#considerations) article.
 
+## Features
+
 >caption The AutoComplete provides the following features:
 
 * `Class` - the CSS class that will be rendered on the main wrapping element of the combobox.
+
 * `ClearButton` - whether the user will have the option to clear the selected value with a button on the input. When it is clicked, the `Value` will be updated to `string.Empty`.
+
 * `Data` - allows you to provide the data source. Required.
+
 * `Enabled` - whether the component is enabled.
+
 * `Filterable` - whether [filtering]({%slug autocomplete-filter%}) is enabled for the end user (suggestions will get narrowed down as they type).
+
 * `FilterOperator` - the string operation that will be used for [filtering]({%slug autocomplete-filter%}). Defaults to `StartsWith`.
+
 * `Id` - renders as the `id` attribute on the `<input />` element, so you can attach a `<label for="">` to the input.
+
 * `MinLength` - how many characters the text has to be before the suggestions list appears. Cannot be `0`. Often works together with [filtering]({%slug autocomplete-filter%}).
+
 * `Placeholder` - the text the user sees as a hint when there is no text in the input.
+
 * `PopupHeight` - the height of the expanded dropdown list element.
-* `PopupWidth` - the width of the expanded dropdown list element.
+
+* `PopupWidth` - the width of the expanded dropdown list element. If you don't specify a value, the dropdown width will match the main element which can help with responsive layouts and 100% widths.
+
 * `TItem` - the type of the model to which the component is bound. Required if you can't provide `Data` or `Value`. Determines the type of the reference object.
+
 * `Value` and `bind-Value`- get/set the value of the component, can be used for binding. Use the `@bind-Value` syntax for two-way binding, for example, to a variable of your own. The `Value` must be a `string`.
+
 * `ValueField` - the name of the field from the model that will be shown as hints to the user. Defaults to `Value`. Not required when binding to a simple list of strings.
+
 * `Width` - the width of the main element.
+
 * Templates - they allow you to control the rendering of items in the component. See the [Templates]({%slug autocomplete-templates%}) article for more details.
+
 * Validation - see the [Input Validation]({%slug common-features/input-validation%}) article for more details.
 
 

components/combobox/overview.md

@@ -58,20 +58,35 @@ The ComboBox is a generic component and its type is determined by the type of th
 >caption The ComboBox provides the following features:
 
 * `AllowCustom` - whether the user can enter [custom values]({%slug components/combobox/custom-value%}). If enabled, the `ValueField` must be a `string`.
+
 * `Class` - the CSS class that will be rendered on the main wrapping element of the combobox.
+
 * `ClearButton` - whether the user will have the option to clear the selected value. When it is clicked, the `Value` will be updated to `default(TValue)`, so there must be no item in the `Data` that has such a `Value`. For example, if `TValue` is `int`, clearing the value will lead to a `0` `Value`, so if there is an Item with `0` in its `ValueField` - issues may arise with its selection. This feature can often go together with `AllowCustom`.
+
 * `Data` - allows you to provide the data source. Required.
+
 * `Enabled` - whether the component is enabled.
+
 * `Filterable` - whether [filtering]({%slug components/combobox/filter%}) is enabled for the end user.
+
 * `FilterOperator` - the method of [filtering]({%slug components/combobox/filter%}) the items. Defaults to `StartsWith`.
+
 * `Id` - renders as the `id` attribute on the `<input />` element, so you can attach a `<label for="">` to the input.
+
 * `Placeholder` - the text the user sees as a hint when no item is selected (the `Value` is `null` or an empty string).
+
 * `PopupHeight` - the height of the expanded dropdown list element.
-* `PopupWidth` - the width of the expanded dropdown list element.
+
+* `PopupWidth` - the width of the expanded dropdown list element. If you don't specify a value, the dropdown width will match the main element which can help with responsive layouts and 100% widths.
+
 * `TItem` - the type of the model to which the component is bound. Required if you can't provide `Data` or `Value`. Determines the type of the reference object.
+
 * `TValue` - the type of the value field from the model to which the component is bound. Required if you can't provide `Data` or `Value`. Determines the type of the reference object.
+
 * `TextField` - the name of the field from the model that will be shown to the user. Defaults to `Text`.
+
 * `ValueField` - the name of the field from the model that will be the underlying `value`. Defaults to `Value`.
+
 * `Value` and `bind-Value`- get/set the value of the component, can be used for binding. If you set it to a value allowed by the model class value field, the corresponding item from the data collection will be pre-selected. Use the `bind-Value` syntax for two-way binding, for example, to a variable of your own.
 
     The `Value` and `ValueField` can be of types:
@@ -80,8 +95,11 @@ The ComboBox is a generic component and its type is determined by the type of th
     * `string`
     * `Guid`
     * `Enum`
+
 * `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/combobox/templates%}) article for more details.
+
 * Validation - see the [Input Validation]({%slug common-features/input-validation%}) article for more details.
 
 

components/dropdownlist/overview.md

@@ -56,17 +56,29 @@ See the [Component Reference]({%slug components/dropdownlist/databind%}#componen
 The DropDownList provides the following features:
 
 * `Class` - the CSS class that will be rendered on the main wrapping element of the dropdownlist.
+
 * `Data` - allows you to provide the data source. Required.
+
 * `DefaultText` - sets the hint that is shown if the `Value` has the `default` value for the type of the `ValueField`. For example, `0` for an `int`, and `null` for an `int?` or `string`. You need to make sure that it does not match the value of an existing item in the data source. You can find examples in the [Examples section](#examples) in this article and in the [Input Validation]({%slug common-features/input-validation%}#dropdownlist) article.
+
 * `Enabled` - whether the component is enabled.
+
 * `Id` - renders as the `id` attribute on the `<select />` element, so you can attach a `<label for="">` to it.
+
 * `PopupHeight` - the height of the expanded dropdown list element.
-* `PopupWidth` - the width of the expanded dropdown list element.
+
+* `PopupWidth` - the width of the expanded dropdown list element. If you don't specify a value, the dropdown width will match the main element which can help with responsive layouts and 100% widths.
+
 * `TItem` - the type of the model to which the component is bound. Required if you can't provide `Data` or `Value`. Determines the type of the reference object.
+
 * `TValue` - the type of the value field from the model to which the component is bound. Required if you can't provide `Data` or `Value`. Determines the type of the reference object.
+
 * `TabIndex` - the `tabindex` attribute rendered on the dropdown.
+
 * `TextField` - the name of the field from the model that will be shown to the user. Defaults to `Text`.
+
 * `ValueField` - the name of the field from the model that will be the underlying `value`. Defaults to `Value`.
+
 * `Value` and `bind-Value`- get/set the value of the component, can be used for binding. If you set it to a value allowed by the model class value field, the corresponding item from the data collection will be pre-selected. Use the `bind-Value` syntax for two-way binding, for example, to a variable of your own. 
 
     The `Value` and `ValueField` can be of types:
@@ -75,8 +87,11 @@ The DropDownList provides the following features:
     * `string`
     * `Guid`
     * `Enum`
+
 * `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/multiselect/overview.md

@@ -68,21 +68,38 @@ To use a Telerik MultiSelect for Blazor
 
 The MultiSelect is a generic component and its type is determined by the type of the model you use as its data source. You can find examples in the [Data Bind - Considerations]({%slug multiselect-databind%}#considerations) article.
 
+
+## Features
+
 >caption The MultiSelect provides the following features:
 
 * `Class` - the CSS class that will be rendered on the main wrapping element of the multiselect.
+
 * `ClearButton` - whether the user will have the option to clear the selected items with a button on the input. When it is clicked, the `Value` will be updated to an empty list.
+
 * `Data` - allows you to provide the data source. Required.
+
 * `Enabled` - whether the component is enabled.
-* `Filterable` - whether [filtering]({%slug multiselect-filter%}) is enabled for the end user (suggestions will get narrowed down as they type).
+
+* `Filterable` - whether [filtering]({%slug multiselect-filter%}) is enabled for the end user 
+(suggestions will get narrowed down as they type).
+
 * `FilterOperator` - the string operation that will be used for [filtering]({%slug multiselect-filter%}). Defaults to `StartsWith`.
+
 * `Id` - renders as the `id` attribute on the `<select />` element, so you can attach a `<label for="">` to it.
+
 * `MinLength` - how many characters the text has to be before the suggestions list appears. Cannot be `0`. Often works together with [filtering]({%slug multiselect-filter%}).
+
 * `Placeholder` - the text the user sees as a hint when there is no selection.
+
 * `PopupHeight` - the height of the expanded dropdown list element.
-* `PopupWidth` - the width of the expanded dropdown list element.
+
+* `PopupWidth` - the width of the expanded dropdown list element. If you don't specify a value, the dropdown width will match the main element which can help with responsive layouts and 100% widths.
+
 * `TextField` - the field in the model from which the text of the items is taken. Defaults to `Text`.
+
 * `TItem` - the type of the model to which the component is bound. Required if you can't provide `Data` or `Value`. Determines the type of the reference object.
+
 * `TValue` - the type of the value field in the model to which the component is bound. Required if you can't provide `Data` or `Value`. Determines the type of the reference object.
 
     The type of the values can be:
@@ -93,9 +110,13 @@ The MultiSelect is a generic component and its type is determined by the type of
     * `Enum`
 
 * `Value` and `bind-Value`- get/set the value of the component, can be used for binding. Use the `@bind-Value` syntax for two-way binding, for example, to a variable of your own. The `Value` must be a `List<TValue>`.
+
 * `ValueField` - the name of the field from the model that will be used as values in the selection. Defaults to `Value`.
+
 * `Width` - the width of the main element.
+
 * Templates - they allow you to control the rendering of items in the component. See the [Templates]({%slug multiselect-templates%}) article for more details.
+
 * Validation - see the [Input Validation]({%slug common-features/input-validation%}) article for more details.