RadzenTree always shows a vertical scrollbar

Radzen.Blazor Components
1

Hello everyone,

We encountered an issue when using the Radzen Tree component. We created the Tree inside a Card and changed the font size, as shown in the code below.

<RadzenCard Style="background-color: #7b89b7; max-height: 232px; border-radius: 0;">
    <RadzenTree style="max-height: 200px;">
        <RadzenTreeItem Text="Item 1">
            <ChildContent>
                <RadzenTreeItem Text="lala"/>
                <RadzenTreeItem Text="lala"/>
                <RadzenTreeItem Text="lala"/>
            </ChildContent>
        </RadzenTreeItem>
        <RadzenTreeItem Text="Item 2">
            <ChildContent>
                <RadzenTreeItem Text="lala"/>
                <RadzenTreeItem Text="lala"/>
                <RadzenTreeItem Text="lala"/>
            </ChildContent>
        </RadzenTreeItem>
        <RadzenTreeItem Text="Item 3">
            <ChildContent>
                <RadzenTreeItem Text="lala"/>
                <RadzenTreeItem Text="lala"/>
                <RadzenTreeItem Text="lala"/>
            </ChildContent>
        </RadzenTreeItem>
    </RadzenTree>
</RadzenCard>

<style>
body {
    --rz-body-font-size: 0.8rem;
}
</style>

(Playground link)

After changing the font size, a vertical scrollbar appears in the Tree. It disappears only when the last item is expanded, even though the scrollbar is not needed when all items are collapsed.

How can we hide the unnecessary scrollbar while still allowing it to appear when needed (for example, when some Tree items are expanded and there is not enough space in the Card)?

Thank you in advance for your help.

2

Hi @svetlana

If you change

  1. RadzenCard max-height: 232px to height: 232px
  2. RadzenTree max-height: 200px to height: 100%

it should do the trick. Unless you really need the RadzenCard to be dynamic height (???)

Regards

Paul

3

Hi @Paul_Ruston
Yes, I need the Card to be dynamic height

4

Hi @svetlana

Try the following -

  1. RadzenTree max-height: 200px;
  2. Add --rz-body-line-height: 2.0; to your <style> body{} declaration

Regards

Paul