Incorrect popup position

Question

Demohttps://codesandbox.io/s/dropdown-width-bug-7u7p0?file=/src/App.vueSteps for reproduce:1) Open demo link2) open sandbox in new window3) Make window width more than 730px but less than 1400px4) click on Dropdown in the bottom of the screenExpected result:Popup will be shown right above the dropdownActual result:Popup shown above the dropdown, but at the left side of the screen(sorry for photo quality, popup always closes when i trying to make a screenshot)

Sevvandhi Nagulan · Answer

Hi Andrew,

Greetings from Syncfusion support.

We have checked the reported query. By default, the popup opens relative to the input element, since the provided popupWidth is greater than the input element’s width hence the reported issue occurs. With the provided sample the popup has no space to open at bottom and right positions. Hence, we suggest you to set the Width for the popup, lower than the input element width to resolve the reported issue. Please refer the code below.

<ejs-dropdownlist

id="dropdownlist"

ref="dropdownObj"

placeholder="Select a country"

:popupWidth="'700px'"

:width="'700px'"

:dataSource="dataSource"

:fields="fields"

></ejs-dropdownlist>

</div>

Modified sample: https://codesandbox.io/s/dropdown-width-bug-forked-yn3fm?file=/src/App.vue:288-711

Please check the above suggestion and get back to us if you need further assistance.

Regards,

Sevvandhi N

Andrew Mandruk · Answer

Hello Sevvandhi NagulanIt still seems to me that this is a bug. If we have a free space below the dropdown (on the same window width), than popup placed as expected.The same behavior expected (and position relatively left window edge), but popup should be above dropdown, when we have no free space below the dropdown.Demo of positioning while there is free space below the dropdown (for positioning example):https://codesandbox.io/s/dropdown-width-bug-forked-n9l0i?file=/src/App.vue

Sureshkumar P · Answer

Hi Andrew, 
 
Thanks for your update. 
 
Based on your shared sample, you have missed to add the width property value as mentioned in our previous solution. So, we suggest you add both the popupwidth and width property to resolve the issue. 
 
Kindly refer to the following video demonstration: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Dropdownpopupposition-1438295566  
 
Get back to us if you need any further assistance. 
 
Regards, 
Sureshkumar P

Andrew Mandruk · Answer

HiI need to use different width of dropdown and popup.Here i have added :width property, but it doesn't work properly:https://codesandbox.io/s/dropdown-width-bug-forked-jz70o

Sureshkumar P · Answer

Hi Andrew, 
 
Thanks for your update. 
 
Based on your shared sample, when you have more width into the popup element compare with input element, the popup aligns left to the component position. So, we suggest you use the same width property value as both component width and popupWidth to resolve the issue. 
 
We have modified the sample based on your shared information. please refer the modified sample here: https://codesandbox.io/s/dropdown-width-bug-forked-h7j5d  
 
Regards, 
Sureshkumar P

Bram van Elderen · Answer

Hello, Sureshkumar,To add to Andrew's explanation.We really need a different popupWidth. We cannot make these equal due to the content we need to add within the popup. So that is not a possible solution for us. (And seems like a workaround in the first place)But as Andrew explained before this could be solved like follows:

Sureshkumar P · Answer

Hi All,  
  
Thanks for your patience,  
  
We have validated your reported query and have considered “Popup is not positioned properly after collision” as a bug from end and the fix will be included with our patch release on the 2nd week of January.  
  
You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further enquiries through this link: https://www.syncfusion.com/feedback/20904/    
  
Regards,  
Sureshkumar P