Question

When developing an ASP.NET web application that is targeted at mobile devices (mainly tablets), I’ve noticed that drop down lists are sometimes difficult for users to select the correct item if they have fat fingers, or just aren’t very good with a touchscreen.

I know I’m not the only one to notice this, as IOS apps specifically moved away from using drop downs for this reason and instead they typically use that UIPickerView control that looks like a roll of toilet paper, but lets people more easily select an item from a list by scrolling.

So, I’m looking for a good way in ASP.NET, without rolling my own custom control, to either make a dropdownlist easier to use on mobile devices, or am looking for some free control that I could use in place of a dropdownlist.

The first thing that comes to mind is; can I somehow space the list items further apart, so people can more easily select the item they intended? I’ve tried changing the font to be bigger, but that doesn’t really help; especially because then the control has to be wider, when the problem is really just how much vertical space there is between items.

If not, does anyone have any suggestions or real-life examples of how they’ve addressed this concern?

Any suggestions are much appreciated!

Answer 1

I’ve used DropKick.js in passed projects with success. It overcomes the shortfalls of styling select options and provides more control of styling through CSS.

Update (after comment):

DropKick.js progressively enhances the HTML (select field) that’s rendered on the page. All you’d need to do is provide the proper hooks that dropkick needs to convert the rendered select field into its implementation.

From dropkicks’ homepage:

How to use

DropKick works by transforming your existing, boring into
beautiful, customizable HTML dropdowns. The name attribute is the only
one that is required. You should also set a tabindex attribute to
enable navigation via tabbing.

<select name="pretty" tabindex="1" class="pretty dk">
  <option value="">Choose a reaction</option>
  <option value="amazed">Amazed</option>
  <option value="bored">Bored</option>
  <option value="surprised">Surprised</option>
</select>

How do I use it in asp.net

Pretty simple you can download the js file and include it in your site:

<script type="text/javascript" src="js/dropkick.js"></script>

And include the css files for the styling:

<link rel="stylesheet" type="text/css" href="default.css">

You’re almost there…now you need to use jquery to add it to the page’s drop down lists, something to this effect:

$('#myDropDown').dropkick();

Or

$('.myDropDown').dropkick();