Last Updated: 17 Aug 2020 14:42 by ADMIN
Created on: 30 Jan 2020 06:04
Category: AutoComplete
Type: Feature Request
[Mobile] Entire dropdown element should always be visible in the viewport, even on small screens

When using AutoComplete on Mobile devices, the onscreen keyboard pops up, and will mask the drop down list from the AutoComplete component.  Yes, the Height of the dropdown list is controllable (px, em, etc.), but this is problematic with varying display sizes.  For example, I was able to show a list of 6 lines on my phone, but when I demoed the App to the Chief Development Officer, his phone was older, smaller, and when the keyboard popped up, only 4 lines were visible!  So embarrassing.

What I want to propose is to extend the AutoComplete component with a new Control called PopUpLines, where the MAX number of lines that can be displayed is set.  In my example, I would set this value to 4 to make sure it works on the CDO's phone.  However, the AutoComplete control would need to know what the screen size is, calculate how big a line is, and how many lines can be displayed without the on-screen keyboard masking the list.  It would then display from 1 to PopULines worth of lines in the drop down box.  This would insure that a on-screen keyboard never masks the AutoComplete list, destroying UI functionality.

Marin Bratanov
Posted on: 17 Aug 2020 14:42

Hi Kevin,

Please Follow boundary detection for the DropDownList here: https://feedback.telerik.com/blazor/1468216-built-in-boundary-detection. I've added your Vote on your behalf. If you have clicked the Follow button on a page, you will get emails for status updates so you can know when there is anything new there.

As to the keyboard - on my end it does not open - the component is all <spans> and a single <select> and neither of those should trigger the soft keyboard. On the other hand, we don't have a way to control whether and when a device will choose to show a keyboard, and to prevent that.


Marin Bratanov
Progress Telerik

Posted on: 17 Aug 2020 13:24


Same issue with this dropdown on mobile screen. 

Do you have an update ? Or is it possible that the keyboard does not open when we press the arrow on the left to see the data ? 


Marin Bratanov
Posted on: 31 Jan 2020 10:27

Hello Brian,

I have renamed this to better reflect what we think would solve this case - improved screen boundary detection that ensures the entire dropdown element is visible in the viewport - meaning that it will reduce its size if there isn't enough room.


Marin Bratanov
Progress Telerik

 UI for Blazor