- Missing overflow hamburger functionality. When small devices some item should move to the hamburger overflow.
- Floating items left or right as on kendo ui toolbar.
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();
}
}
Description
Adaptive Toolbar buttons do not appear in the overflow popups when expected.
Steps To Reproduce
https://demos.telerik.com/blazor-ui/toolbar/adaptive
https://blazorrepl.telerik.com/mTuAEzPe41y4e7y637
Use the slider to reduce the witdh of the toolbars
Actual Behavior
Visible buttons that disappear from the toolbar do not appear in the two popups.
Expected Behavior
Visible buttons that disappear from the toolbar should appear in the overflow popup.
Browser
All
Last working version of Telerik UI for Blazor (if regression)
8.1.1
The ToolBarButton is missing the ability to set the "aria-label".
When attempting to just add it directly, I get the following error:
The "Bold" button in the code snippet below remains visible despite the fact that it's Visible property is false
<TelerikToolBar>
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;
}
}