Multiselect wrong popup placement in Firefox latest

[Konnos Kall]

Hello it seems that multiselect popup with checkbox behaves strangely in firefox as it seems as you can see in the attached screenshots, overlays the input field and not only that but selects a value. 

Attachment: screenshots_eb80a991.zip

[Berly Christopher]

Hi Konnos,  

  

Greetings from Syncfusion support.  

  

We would like to inform you that, our EJ2 MultiSelect popup will be opened under the input component. If the place is not enough to show the popup, then It will be displayed top of the input element. This is the default popup component behaviour.  

  

While checking the reported issue we suspect that this issue may be caused due to any collision will be occurred when open the MultiSelect popup. But this issue is not reproduced at our end.   

  

Please check the below sample which is same as per the provided screenshot.   

  

Sample Link: https://stackblitz.com/edit/angular-bgkzcu-gmjepd?file=app.component.ts 

  

Please find the screenshot from below. 

 

 

  

So, we suggest you to change the popup position or offset width in the open event of the MultiSelect component as mentioned below and confirm us whether the issue is resolved or not.   

  

You can set the popup position X as” left” and Y as “top” in the open event else you can set the offsetX and offsetY position with number value as per your requirement to position the MultiSelect popup.  

  

UG Link: https://ej2.syncfusion.com/angular/documentation/multi-select/data-binding/ 

API Link: https://ej2.syncfusion.com/angular/documentation/api/multi-select/#open 

Demo Link: https://ej2.syncfusion.com/angular/demos/#/material/multi-select/checkbox  

  

onOpen(args) {  

    args.popup.position = { X: "left", Y: "top" }; // changing popup postion  

  }  

onOpen(args) {  

    args.popup.offsetX=500; // changing the popup position with set any number value  

    args.popup.offsetY=500;  

}   

 

    

If issue persist, please provide the below details that will be help us to check and proceed further at our end.   

·       Have you rendered the MultiSelect component inside Dialog component? 

·       Have you done any CSS style changes for MultiSelect component?’ 

·       Are you facing this issue in the MultiSelect component alone else all the popup components such as DropDownList, AutoComplete component… etc? 

·       Share issue reproducing sample or code example (if possible) 

·       Syncfusion product version 

·       Firefox version 

Regards,  

Berly B.C