Where there is a spacer inside the ToolBar or when there are no items that should be hidden anymore, the overflow anchor overlay with the other items.
#1563693
Programmatic changes to the Overflow parameter of ToolBar items do not take effect until the user resizes the browser window. This is because the internal item collections are updated only during initialization and window resize.
A possible workaround is to recreate the ToolBar items when making changes to them.
Test Page with the workaround:
<TelerikToolBar Adaptive="true">
@if (ShouldRenderToolBarItems)
{
<ToolBarButton>Foo</ToolBarButton>
<ToolBarButton Overflow="@PrintOverflow">Print</ToolBarButton>
<ToolBarButton>Bar</ToolBarButton>
}
</TelerikToolBar>
<TelerikButton OnClick="TogglePrint">Toggle Print</TelerikButton>
@code {
private ToolBarButton printButton = default!;
private TelerikToolBar toolbar = default!;
private ToolBarItemOverflow PrintOverflow { get; set; } = ToolBarItemOverflow.Auto;
private bool ShouldRenderToolBar { get; set; } = true;
private bool ShouldRenderToolBarItems { get; set; } = true;
private async Task TogglePrint()
{
// Uncomment to enable the workaround
//ShouldRenderToolBarItems = false;
await Task.Delay(1);
if (PrintOverflow == ToolBarItemOverflow.Always)
{
PrintOverflow = ToolBarItemOverflow.Auto;
}
else
{
PrintOverflow = ToolBarItemOverflow.Always;
}
ShouldRenderToolBarItems = true;
}
}
The "Bold" button in the code snippet below remains visible despite the fact that it's Visible property is false
<TelerikToolBar>
When Adaptive = true, changing the collection of buttons seems to "break" the adaptive calculation. The Toolbar fails to determine what are the buttons to show in the main element and what are the buttons to show in the pop-up: https://blazorrepl.telerik.com/wSubOWlS08FLz7aZ54
===
ADMIN EDIT
For the time being, a possible workaround is to force the component to refresh when you change the buttons. For that purpose, you can dispose it and re-initialize it after some delay. Here is a runnable sample: https://blazorrepl.telerik.com/QIOFuCvS400o5tfL34.
lm applying class like this :
<TelerikToolBar>
<ToolBarButton Class="my-custom-class" ... />
<ToolBarTemplateItem Class="my-custom-class">
...
</ToolBarTemplateItem>
</TelerikToolBar>
But the resulting div for the ToolBarITemplateItem does not get class applied to it.
=====ADMIN EDIT=====
A possible workaround for the time being is to use different CSS selectors in order to style the specific elements:
<style>
.second-template-item {
border: solid;
border-color: limegreen;
}
.my-group button:nth-child(1) {
border: solid;
border-color: red;
}
.my-group button:nth-child(3) {
border: solid;
border-color: blue;
}
</style>
<TelerikToolBar>
<ToolBarButtonGroup Class="my-group">
<ToolBarButton>Bold</ToolBarButton>
<ToolBarButton>Italic</ToolBarButton>
<ToolBarButton>Underline</ToolBarButton>
</ToolBarButtonGroup>
<ToolBarSeparator />
<ToolBarTemplateItem>
<TelerikDropDownList Data="@Roles" @bind-Value="@SelectedRole" />
</ToolBarTemplateItem>
<ToolBarTemplateItem>
<TelerikDropDownList Class="second-template-item" Data="@Roles" @bind-Value="@SelectedRole" />
</ToolBarTemplateItem>
</TelerikToolBar>
@code {
public string SelectedRole { get; set; }
public List<string> Roles { get; set; } = new List<string>()
{
"Manager", "QA", "Developer", "Support"
};
protected override void OnInitialized()
{
SelectedRole = Roles.FirstOrDefault();
}
}
The AdaptiveToolBar does not display all items in the overflow section (more buttons) when there are Buttons with Visibility set to false.
Run the REPL snippet
Shrink the window size so that the toolbar is narrower and some buttons are hidden
Open the Overflow list
Refresh and Refresh All buttons are missing from the list
Buttons with Visible=false
parameter should not affect the overflowed button collection.
All buttons that are Visible=true and overflowed should be available in the more buttons section.
All
All
The ToolBarButton is missing the ability to set the "aria-label".
When attempting to just add it directly, I get the following error:
Use a ToolBar with its ToolBarTemplateItem (with DropDownList inside of the template) in a separate component. Try to switch values in the DropDownList with the arrows of the keyboard. The value in the DropDownList does not change until you move away from it with a right arrow. This only happens when the template with the dropdown inside is in a separated component.
-------------------- ADMIN EDIT --------------------
The workaround for such a scenario is to export the DropDownList too onto a separated component and then call it in the ToolBarTemplateItem. See the attached sample project.