Telerik Drawer items text clipped at 240px

1 Answer 35 Views
Drawer
Walter
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
0
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())"
               Icon="@SvgIcon.Menu">
    Toggle drawer
</TelerikButton>

<TelerikDrawer Data="@Data" Mode="@DrawerMode.Push"
               Width="450px"
               @ref="@DrawerRef">
    <DrawerContent>lorem ipsum</DrawerContent>
</TelerikDrawer>

@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.

Regards,
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!
Tags
Drawer
Asked by
Walter
Top achievements
Rank 1
Answers by
Hristian Stefanov
Telerik team
Share this question
or