Telerik Drawer items text clipped at 240px

1 Answer 35 Views
Top achievements
Rank 1
Walter asked on 19 Dec 2023, 10:00 PM
We are start using Blazor in a major redevelopment of our Angular App.
We are looking at the Drawer to create a side navigation component that will display Hierarchical data.
At the moment with just two levels the description of the items is clipped and shows the three dots at the end e.g. "Financial Comparis..."
How do I resize the drawer sidebar width to more than the default 240px so that text is not clipped and ends with ....?

1 Answer, 1 is accepted

Sort by
Hristian Stefanov
Telerik team
answered on 20 Dec 2023, 08:52 PM

Hi Walter,

I'm glad to see that you are exploring our Blazor Drawer.

To resize the Drawer sidebar width, the component exposes a "Width" parameter that you can use. I have prepared an example for you that demonstrates its usage:

@using Telerik.SvgIcons

<TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())"
    Toggle drawer

<TelerikDrawer Data="@Data" Mode="@DrawerMode.Push"
    <DrawerContent>lorem ipsum</DrawerContent>

@code {
    private TelerikDrawer<DrawerItem> DrawerRef { get; set; }

    private IEnumerable<DrawerItem> Data { get; set; } =
        new List<DrawerItem>
            new DrawerItem { Text = "Counter", Icon = SvgIcon.Plus },
            new DrawerItem { Text = "FetchData", Icon = SvgIcon.GridLayout },

    public class DrawerItem
        public string Text { get; set; }
        public ISvgIcon Icon { get; set; }

Let me know whether this is what you are looking for.

Hristian Stefanov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!
Asked by
Top achievements
Rank 1
Answers by
Hristian Stefanov
Telerik team
Share this question