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.