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> |
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> |
Let us know if you need any further assistance on this.
Regards,
Prince
