Skip to content

Commit 51665ba

Browse files
github-actions[bot]dimodi
github-actions[bot]
and
dimodi
authored
Merge kb-dropdown-wrap-2855 into production (#2856)
* kb(Dropdowns): Add KB for disabled text wrapping * add more links --------- Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
1 parent d701087 commit 51665ba

File tree

2 files changed

+114
-1
lines changed

2 files changed

+114
-1
lines changed

‎_contentTemplates/common/dropdowns-virtualization.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ This section will explain the parameters and behaviors that are related to the v
1212
1313
* `ScrollMode` - `Telerik.Blazor.DropDownScrollMode` - set it to `DropDownScrollMode.Virtual`. It defaults to the "regular" scrolling.
1414
* `Height` - `string` - [set the height](slug:common-features/dimensions) in the nested **popup settings** tag of the component. It must **not** be a `null/empty` string.
15-
* `ItemHeight` - `decimal` - set it to the height each individual item will have in the dropdown. Make sure to accommodate the content your items will have and any item template.
15+
* `ItemHeight` - `decimal` - set it to the height each individual item will have in the dropdown. Make sure to accommodate the content your items will have and any item template. [Disable text wrapping](slug:dropdowns-kb-disable-long-text-wrap) if the items have long text, which wraps and overlaps. Another option is to increase the component `Width` or just the dropdown `Width` in the nested `<ComponentName>PopupSettings` tag.
1616
* `PageSize` - `int` - defines how many items will actually be rendered and reused. The value determines how many items are loaded on each scroll. The number of items must be large enough according to the `ItemHeight` and popup `Height`, so that there are more items than the dropdown so there is a scrollbar.
1717

1818
You can find a basic example in the [Local Data](#local-data-example) section below.

‎knowledge-base/dropdowns-disable-long-text-wrap.md

+113
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
---
2+
title: DropDown Items Wrap or Overlap
3+
description: Learn how to resolve and prevent text wrapping of long items in Telerik Blazor dropdown components, such as AutoComplete, ComboBox, DropDownList, and MultiSelect.
4+
type: troubleshooting
5+
page_title: How to Prevent Dropdown Item Text Wrapping
6+
slug: dropdowns-kb-disable-long-text-wrap
7+
tags: blazor, autocomplete, combobox, dropdownlist, multiselect, css, styling
8+
ticketid: 1663555, 1668373, 1679799, 1682531
9+
res_type: kb
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>
19+
AutoComplete for Blazor, <br />
20+
ComboBox for Blazor, <br />
21+
DropDownList for Blazor, <br />
22+
MultiSelect for Blazor
23+
</td>
24+
</tr>
25+
</tbody>
26+
</table>
27+
28+
## Description
29+
30+
This KB article deals with the following scenarios:
31+
32+
1. The items in a Telerik dropdown component are long and wrap to multiple lines. The items become very high. How to avoid and disable this behavior?
33+
1. A Telerik dropdown component is using virtualization with `ItemHeight`. Long items wrap and overlap. How to fix this UI issue?
34+
35+
## Cause
36+
37+
By default, the dropdown items are as wide as the dropdown. Text wrapping of longer items is expected.
38+
39+
## Solution
40+
41+
1. Set a custom class in the component's `PopupSettings`.
42+
1. Apply a `white-space: nowrap;` style to the custom class.
43+
1. If a `PopupSettings` tag was not present until this point, also set a `Height`, otherwise it will change from `"200px"` to `"auto"`.
44+
45+
>caption Disable text wrapping and overlapping of long dropdown items
46+
47+
````RAZOR
48+
<TelerikDropDownList Data="@ListItems"
49+
@bind-Value="@SelectedValue"
50+
TextField="@nameof(ListItem.Text)"
51+
ValueField="@nameof(ListItem.Id)"
52+
Width="160px">
53+
<DropDownListSettings>
54+
<DropDownButtonPopupSettings Class="no-wrap" Height="200px" />
55+
</DropDownListSettings>
56+
</TelerikDropDownList>
57+
58+
<TelerikComboBox Data="@ListItems"
59+
@bind-Value="@SelectedValue"
60+
TextField="@nameof(ListItem.Text)"
61+
ValueField="@nameof(ListItem.Id)"
62+
ScrollMode="@DropDownScrollMode.Virtual"
63+
ItemHeight="30"
64+
PageSize="12"
65+
Filterable="true"
66+
FilterOperator="@StringFilterOperator.Contains"
67+
Width="160px">
68+
<ComboBoxSettings>
69+
<ComboBoxPopupSettings Class="no-wrap" Height="200px" />
70+
</ComboBoxSettings>
71+
</TelerikComboBox>
72+
73+
<style>
74+
.no-wrap {
75+
white-space: nowrap;
76+
}
77+
</style>
78+
79+
@code {
80+
private List<ListItem> ListItems { get; set; } = new();
81+
82+
private int SelectedValue { get; set; } = 3;
83+
84+
protected override void OnInitialized()
85+
{
86+
ListItems = new List<ListItem>();
87+
88+
for (int i = 1; i <= 64; i++)
89+
{
90+
ListItems.Add(new ListItem()
91+
{
92+
Id = i,
93+
Text = $"{i} Item with a lot of text that may wrap {i}"
94+
});
95+
}
96+
97+
base.OnInitialized();
98+
}
99+
100+
public class ListItem
101+
{
102+
public int Id { get; set; }
103+
public string Text { get; set; } = string.Empty;
104+
}
105+
}
106+
````
107+
108+
## See Also
109+
110+
* [AutoComplete Popup Setttings](slug:autocomplete-overview#popup-settings)
111+
* [ComboBox Popup Setttings](slug:components/combobox/overview#popup-settings)
112+
* [DropDownList Popup Setttings](slug:components/dropdownlist/overview#popup-settings)
113+
* [DropDownList Popup Setttings](slug:multiselect-overview#popup-settings)

0 commit comments

Comments
 (0)