We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

DropDownList popup list doesn't go with the parent

Thread ID:

Created:

Updated:

Platform:

Replies:

145729 Jul 5,2019 10:09 AM UTC Jul 10,2019 11:31 AM UTC Vue 3
loading
Tags: DropDownList
Tomasz Tomczykiewicz
Asked On July 5, 2019 10:11 AM UTC

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 [Syncfusion]
Replied On July 9, 2019 05:49 AM UTC

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.   
      
      
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
Replied On July 10, 2019 11:05 AM UTC

Thanks, it solved my problems.

Best regards,
Tomasz Tomczykiewicz

Prince Oliver [Syncfusion]
Replied On July 10, 2019 11:31 AM UTC

Hi Tomasz, 

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

Regards, 
Prince 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon