问题描述
在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
在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> 标签.这是一个很好的主意,并且将是一个很小的解决方法,但还不够,因为IBAN仍然受到iPhone和Android浏览器的青睐:-(
- 我已经知道 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浏览器中缩写的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!