2

Recently I have started working on making my website compatible with iPad.

I have a page that has a SELECT boxes. One of the boxes has items in it that are quite wide in text length.

Now with the iPad SELECT boxes have a new control that pops up a list for the user to select from. The problem I'm finding with this control is it cuts off the wide text entries. To be precise it truncate all the options of length more than 30/35 and append "...".

Does anyone know if it's possible to apply some CSS to control the width of the pop-up control for SELECT boxes on the iPad?

I've tried specifying a "width" on the SELECT but it doesn't change the pop-up control. I've also tried the "size" option but the iPad still renders it as a single SELECT combo.

Thanks!

Bipul
  • 1,327
  • 4
  • 16
  • 33

2 Answers2

2

You can't modify the way that the iPad or iPhone render select elements, and this concatenation issue you describe has been complained about multiple times.

A possible solution (though not ideal) is to detect the iPad via User Agent and provide an 'optimized' list of option values that will at least display the information you deem pertinent.

Nathan Anderson
  • 6,768
  • 26
  • 29
0

As the last field add the optgroup and it should solve the problem

<select>
  <option value="">please select</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
  <optgroup label=""></optgroup>
</select>
Jacek
  • 1