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

Multiselect dropdown alignment issue using Material theme

Thread ID:

Created:

Updated:

Platform:

Replies:

146474 Aug 5,2019 02:52 PM UTC Aug 8,2019 09:39 AM UTC Vue 3
loading
Tags: MultiselectDropDown
Rob Lugt
Asked On August 5, 2019 02:52 PM UTC

We have two input controls (a date picker and a multi-select) next to each other.  Normally they are horizontally aligned, but when the multi-select is configured to show the DropDownArrow icon (showDropDownIcon="true") the multi-select control drops down by 1 pixel.

Also we have a related bug:
The value passed to the showDropDownIcon prop does not seem to work.  Both of the following do show the drop-down icon: showDropDownIcon="true", showDropDownIcon="false"

Vinoth Kumar Sundara Moorthy [Syncfusion]
Replied On August 7, 2019 11:16 AM UTC

Hi Rob, 
 
Good day to you. 
 
Query 1: When the multi-select is configured to show the DropDownArrow icon (showDropDownIcon="true") the multi-select control drops down by 1 pixel. 
 
We have considered the reported issue as defect and it will be included in any of our upcoming patch release. You can track the status of this defect using below link from our feedback portal, 
 
 
Query 2: The value passed to the showDropDownIcon prop does not seem to work.  Both of the following do show the drop-down icon: showDropDownIcon="true", showDropDownIcon="false" 
 
We have enabled the showDropDownIcon using props and by enabling/disabling it is working fine in our end. Please check the below code example, 
 
Code Example 
<template> 
    <div> 
        <div id="mul"> 
            <ejs-multiselect id='multiselect' showDropDownIcon='icon' dataSource='sportsData'></ejs-multiselect> 
        </div> 
        <div id="date"> 
            <ejs-datepicker></ejs-datepicker> 
        </div> 
    </div> 
</template> 
 
<script> 
    import Vue from 'vue'; 
    import { MultiSelectPlugin } from "@syncfusion/ej2-vue-dropdowns"; 
    import { DatePickerPlugin } from '@syncfusion/ej2-vue-calendars'; 
 
    Vue.use(DatePickerPlugin); 
    Vue.use(MultiSelectPlugin); 
 
    export default { 
        props: { 
            icon: { 
                default: true, 
                type: Boolean 
            } 
        }, 
        data (){ 
            return { 
                sportsData: ['Badminton', 'Cricket', 'Football', 'Golf', 'Tennis'], 
            } 
        } 
    } 
</script> 
 
 
Could you please check the above sample and get back to us with complete code snippet or issue replicable sample If still issue persists?  
 
Regards, 
Vinoth Kumar S 


Rob Lugt
Replied On August 7, 2019 11:32 AM UTC

Re Query 2: The value passed to the showDropDownIcon prop does not seem to work.  

Thanks for you reply.  Passing a string of "false" does not work because the prop is expecting a boolean value.  using :showDropDownIcon="false" does work. I recognise this is a common pattern, so not a bug.



Narayanasamy Panneer Selvam [Syncfusion]
Replied On August 8, 2019 09:39 AM UTC

Hi Rob, 
 
Thanks for your update. 
 
Query 2: The value passed to the showDropDownIcon prop does not seem to work. 
 
Yes, you are right the reported scenario is not a bug. 
 
Query 1: When the multi-select is configured to show the DropDownArrow icon (showDropDownIcon="true") the multi-select control drops down by 1 pixel.  
 
As we have promised already, we will include fix in upcoming patch release. We will let you know once the fix is included. We appreciate your patience until then. 
 

Regards,
 
Narayanasamy P. 


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