HTML& lt; select& gt;元素在iPhone或Android浏览器中缩写 [英] HTML <select> element is abbreviated in iPhone or Android browsers
问题描述
在iPhone或Android浏览器中显示HTML < select> 下拉菜单时，我有点处境.我经常需要渲染很长的< option> 标签，例如
I'm in a bit of a situation with my HTML <select> dropdowns, when they are displayed in an iPhone or Android browser. I often need to render <option> labels that are quite long, such as for instance
[AccountType] [EUR]-[客户]-CH12 3456 7890 1234 5678 9
[AccountType] [EUR] - [Customer] - CH12 3456 7890 1234 5678 9
在Android上，这将呈现如下内容:
On Android, this will render something like that:
在iPhone上，情况甚至更糟.虽然我喜欢本地的外观和感觉，但剪裁标签是不行的.用红色圆圈圈出，您会发现下拉菜单本身的呈现方式.我可以忍受.但是，当我单击它时，请查看出现的蓝色弹出窗口.用户将永远找不到他的数据...
On the iPhone it's even worse. While I like the native look and feel, the cropping of the labels is a no-go. Circled in red, you'll find how the dropdown itself is rendered. I could live with that. But check out the blue popup that appears, when I click on it. The user will never find his data...
...请考虑以下几点:
... consider these points:
- 我可以缩写一些信息，但在select中，仍然会有带有长选项标签的案例.因此，无需告诉我IBAN可以缩写，等等.
- 我不能依靠< select> 或< option> 元素的CSS样式.
- 用户猎人已经提出了< optgroup> 标签 jQuery UI Selectmenu原型.不幸的是，它尚未与jquery-ui 1.8.5兼容，并且不能保证它何时会稳定.
- 我正在使用jquery和jquery-ui 1.8.5，因此非常欢迎任何有关插件的想法/引用.
- 欢迎其他任何解决该问题的想法一般.
- I can abbreviate some information, but I will still have cases with long option labels in the select. So no need to tell me that the IBAN could be abbreviated, etc.
- I cannot rely on CSS styling of <select> or <option> elements.
- User hunter has already proposed the <optgroup> tag here. That's quite a nice idea and will be a small workaround, but is not enough, as the IBAN is still cropped by both iPhone and Android browsers :-(
- I already know the very nice looking jQuery UI Selectmenu prototype. Unfortunately, it's not yet compatible with jquery-ui 1.8.5 and there is no guarantee when it will be stable.
- I am using jquery and jquery-ui 1.8.5, so any ideas / references to plugins are very welcome.
- Any other ideas to circumvent that problem GENERALLY are welcome.
推荐答案
虽然 hunter 和 Ivan Buttinoni 给出的拟议解决方法颇具创意，但我有个好主意最终找到不同的解决方案.现在，它看起来类似于jQuery UI的combobox组件:
While the proposed workarounds given by hunter and Ivan Buttinoni were creative, and good ideas, I had to find a different solution in the end. It now looks similar to jQuery UI's combobox component:
http://jqueryui.com/demos/autocomplete/#combobox
这篇关于HTML& lt; select& gt;元素在iPhone或Android浏览器中缩写的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
