DropDownList popup list doesn't go with the parent

[Tomasz Tomczykiewicz]

Hi,

I have a problem with DropDownList. When I resize the browser window the popup doesn't go with the control (see the gif from the attachment). 

It works well with MultiselectDropDown.

Edit: MultiselectDropDown doesn't work in modals.

Best regards,

Tomasz Tomczykiewicz

Attachment: Kapture_20190705_at_12.04.17.gif_17978469.zip

[Prince Oliver]

Hi Tomasz,    

Thank you for contacting us. 

Query 1: I have a problem with DropDownList. When I resize the browser window the popup doesn't go with the control (see the gif from the attachment). It works well with MultiselectDropDown. 

We were able to reproduce the reported issue at our end and we will refresh the DropDownList popup upon popup open and component rendering time only. So, the reported issue has been occurred in your application. So, we suggest you to use the below work around solution to get rid of the reported issue. 

<template> 

    <div class="control_wrapper"> 

        <div class="col-lg-12 content-wrapper" style="height: 350px"> 

            <div id='content' style="margin: 0 auto; width:20%; padding-top: 30px"> 

                <ejs-dropdownlist id='dropdownlist' :close="onClose" :dataSource='sportsData' :open="onOpen"> 

                </ejs-dropdownlist> 

            </div> 

        </div> 

    </div> 

</template> 

 

<script> 

    import Vue from 'vue'; 

    import { DropDownListPlugin } from "@syncfusion/ej2-vue-dropdowns"; 

    Vue.use(DropDownListPlugin); 

 

    export default Vue.extend({ 

        data: function () { 

            return { 

                sportsData: ['Badminton', 'Cricket', 'Football', 'Golf', 'Tennis'] 

            }; 

        }, 

        methods: { 

           onOpen: function (args) { 

                window.addEventListener('resize', (e) => { 

                    args.popup.refresh(); 

                }) 

            }, 

            onClose() { 

                window.removeEventListener("resize", null); 

            } 

        } 

    }); 

</script> 

We have attached the sample for your reference, please find it in the following location: https://www.syncfusion.com/downloads/support/forum/145729/ze/quickstart-637406760  

Query 2: MultiselectDropDown doesn't work in modals. 

We suspect that you might be using Multiselect inside bootstrap modal. This issue occurs due to the bootstrap modal enforcing the focus on itself, when an element which is not a child element of bootstrap modal gets focused. The dropdown’s popup will be rendered in as child to body element out of the modal and hence when it is opened the input is focused out. Kindly refer to the following online blogs for further reference on this issue.   

      

Link 1: https://github.com/sweetalert2/sweetalert2/issues/374        

Link 2: https://github.com/twbs/bootstrap/issues/19971        

      

This issue can be resolved this issue by unbinding the focusin modal event in show modal event as per the suggestion given in the above blogs.      

<script type="text/javascript"> 

    $(function () { 

        $('#modalMSDDL').on('shown.bs.modal', function () { 

            $(document).off('focusin.modal'); 

        }); 

    }) 

</script> 

Please find the modified sample in the following location: https://codesandbox.io/s/n4qrr8m9jl  

Let us know if you need any further assistance on this. 

Regards, 

Prince 

[Tomasz Tomczykiewicz]

Thanks, it solved my problems.

Best regards,

Tomasz Tomczykiewicz

[Prince Oliver]

Hi Tomasz, 

Most welcome. We are glad that the issue is resolved in your end. 

Regards, 

Prince