In certain scenario, Popup of the Multiselect component is not quite opened on the correct position. I did not check but this issue is probably reproducible for other dropdown components (such as Combobox, DropdownList, etc) as well.
It seems to me this happens when:
- A width greater than the widht of the input is set
- AND input is too close to the bottom-right edge of the window and as a result popup cannot be shown below the input element but above it instead
THEN in the very first render, the popup is not position quite right and moves a bit in the next render.
Precise steps to reproduce problem:
- Make sure to use minimal reproducible example attached below.
- Click and hold left button of a mouse inside the MultiSelect Component.
- The popup should open up and be positioned above the input but not being quite aligned right with the window nor the input.
- Release the left button of a mouse.
- The popup recalculates its position.
- Problem: The popup should have been positioned correctly when opened (NOT after releasing mouse button).
Minimal reproducible example:
import { Component, ViewEncapsulation } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {
KENDO_DROPDOWNS,
PopupSettings,
} from '@progress/kendo-angular-dropdowns';
import { KENDO_INPUTS } from '@progress/kendo-angular-inputs';
import { KENDO_LABELS } from '@progress/kendo-angular-label';
@Component({
selector: 'my-app',
imports: [FormsModule, KENDO_DROPDOWNS, KENDO_LABELS, KENDO_INPUTS],
styles: [
`
.app-layout {
padding: 1rem;
height: 800px;
display: grid;
grid-template-columns: 1fr 230px;
}
.sidebar {
height: 100%;
padding: 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.unrelated-sidebar-content {
height: 200px;
}
.box {
border: 1px solid grey;
}
`,
],
template: `
<div class="app-layout">
<main class="box"> Main Content </main>
<aside class="box sidebar">
<div class="box unrelated-sidebar-content">Imagine some other content here</div>
<kendo-formfield showHints="always">
<kendo-label text="Favorite sport:">
<kendo-multiselect
[data]="listItems"
[(ngModel)]="value"
[popupSettings]="popupSettings"
></kendo-multiselect>
</kendo-label>
<kendo-formhint
>Add your favourite sport, if it is not in the
list.</kendo-formhint
>
</kendo-formfield>
</aside>
</div>
`,
encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
public listItems: Array<string> = [
'Width Must Be Greater Than Width Of The Multiselect Component Because We Have Super Long Text',
'When List Is Open, It Moves Slightly To The Right',
'It Is Not Possible To Align Popup With The Right Edge',
'It Is Not Possible To Set "anchorAlign" and "popupAlign"',
];
public value: any = [];
// @see https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#positioning
public popupSettings: PopupSettings = { width: 500 };
}
Alignment to the right
I believe, this could be simply solved if we were able to configure "anchorAlign" and "popupAlign" as described here: https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#positioning .
In addition, it would be a nice feature in general, to be able to align popup with the element's right edge. Currently, this is pretty much hard coded:
const horizontalAlign = this.direction === "rtl" ? "right" : "left";
const anchorPosition = <Align>{ horizontal: horizontalAlign, vertical: "bottom" };
const popupPosition = <Align>{ horizontal: horizontalAlign, vertical: "top" };
const appendToComponent = typeof this.popupSettings.appendTo === 'string' && this.popupSettings.appendTo === 'component';
this.popupRef = this.popupService.open({
anchor: this.wrapper,
anchorAlign: anchorPosition,
animate: this.popupSettings.animate,
appendTo: this.appendTo,
content: this.popupTemplate,
popupAlign: popupPosition,
popupClass: this.listContainerClasses,
positionMode: appendToComponent ? 'fixed' : 'absolute'
});From the code above, it is clear that the "horizontalAlign" cannot be really configured. In simple terms, you could use "left" alignment as a default intead of it being hard-coded like that; and prefer alignment specified in the "popupSettings".
Please, let me know if something needs to be further clarified.
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.
It would be great if the <kendo-listbox> had the possibility to take in a list of selected values, which causes the matching items to be selected.
Currently, the only option I see is to inject the ListBoxComponent as viewChild, and call .select manually, which is quite cumbersome.
Suggestion:
- additionally to the "textField", provide a "valueField" property
- also add a "selectedValues" property, which takes in an array / signal of value properties, which then are automatically selected, whenever its value changes.
See https://www.telerik.com/kendo-angular-ui/components/listbox/api/listboxcomponent