Pending Review
Last Updated:
21 Apr 2026 12:25
by Jakub
Jakub
Created on:
21 Apr 2026 12:25
Category:
ToolBar
Type:
Bug Report
Elements of the Toolbar component are misaligned when overflow is set to menu and there is sufficient space
When Toolbar component is configured to
- Have spacer between two elements: Angular ToolBar Control Types - Kendo UI for Angular
- AND it uses `overflow=menu` strategy: Angular ToolBar Responsive ToolBar - Kendo UI for Angular
- AND when there is sufficient space, so the Toolbar is NOT overflowing. In other words, the visibility of the overflow button is set to hidden.
THEN the elements are not properly aligned with the right edge of the Toolbar component. This is because the overflow button still occupies the space as is the bahviour of the `visibility` style: visibility CSS property - CSS | MDN
- The visibility CSS property shows or hides an element without changing the layout of a document.
Minimal reproducible example:
import { Component } from '@angular/core';
import { KENDO_TOOLBAR } from '@progress/kendo-angular-toolbar';
import { FormsModule } from '@angular/forms';
import { KENDO_INPUTS } from '@progress/kendo-angular-inputs';
import { KENDO_LABELS } from '@progress/kendo-angular-label';
@Component({
selector: 'my-app',
imports: [FormsModule, KENDO_TOOLBAR, KENDO_INPUTS, KENDO_LABELS],
template: `
<kendo-label [for]="width" text="Set toolbar width"></kendo-label>
<kendo-slider
#width
[(ngModel)]="toolbarWidth"
style="width: 100%; display: block;"
[showButtons]="false"
[min]="0"
[max]="100"
[largeStep]="1"
tickPlacement="none"
></kendo-slider>
<kendo-toolbar overflow="menu" [style.width.%]="toolbarWidth">
<kendo-toolbar-button text="My Kendo Angular Toolbar Button A" />
<kendo-toolbar-spacer></kendo-toolbar-spacer>
<kendo-toolbar-button text="My Kendo Angular Toolbar Button B" />
</kendo-toolbar>
`,
})
export class AppComponent {
toolbarWidth = 100;
}
Expected behaviour: The overflow button does not occupy that space in the scenario described above.
- EITHER has `display: none` OR it is completely removed from the DOM when there is sufficient space.
Attached Files:
0 comments