search

jquery-archive / jquery-mobile

jQuery Mobile Framework
https://jquerymobile.com
Other
9.69k stars 2.4k forks source link

selectmenu overflow inside listview on Android #7039

Open weeman1337 opened 10 years ago

weeman1337 commented 10 years ago

Hello,

when an option inside a selectmenu inside a listview is longer than the available space, the text runs out of the selectmenu widget. On desktop browser the text will be cut off by "...", what's the expected behavior.

Here is the link to a test page to reproduce the issue: http://jsbin.com/IFolanOW/140/edit?html,output

The issue appears at leat on Android 4.2 using the system browser on the page above.

arschmitz commented 10 years ago

Thank you for reporting this issue. Please see our contributing guidelines https://github.com/jquery/jquery-mobile/blob/master/CONTRIBUTING.md and create a jsbin test page which reproduces the issue. Im going to close this issue as incomplete and once a test page is provided we will reopen

weeman1337 commented 10 years ago

Okay I'll follow the contributing guidelines more next time. I've updated my first post to match the guidelines.

arschmitz commented 10 years ago

i can confirm this on 4.2.2 and this is indeed a bug it should be truncated with "..." as you see on the desktop

jaspermdegroot commented 10 years ago

@weeman1337 @arschmitz

Can you confirm that this only happens on the native browser, not on Chrome for Android, and that it only happens when the select is wrapped in a fieldset (first example here http://jsbin.com/AKOmUxa/111)? It's not just the text that runs out the selectmenu button, but the whole button runs out the list item, right?

jaspermdegroot commented 10 years ago

Related ticket https://github.com/jquery/jquery-mobile/issues/6077

weeman1337 commented 10 years ago

I took screenshots from the example page.

using the native browser: screenshot_2014-02-04-10-04-27

using chrome: screenshot_2014-02-04-10-06-33

aljachimiak commented 10 years ago

I can confirm this issue in an older version of Chrome (22 desktop). The ellipsis appears unnecessarily for elements with the class .ui-mini

jaspermdegroot commented 10 years ago

@aljachimiak

Did you intend to comment on this ticket or was it meant as a comment at https://github.com/jquery/jquery-mobile/issues/6787?

jaspermdegroot commented 10 years ago

I spend some time today on this issue, but I wasn't able to find a solution yet. We set min-width: 0; to resolve this problem for all WebKit browsers. However, when <meta name="viewport" content="width=device-width"> is used, this solution doesn't work anymore. The same problem occurs when you test this without jQuery Mobile, with a native select.