This is with the following option set: $.mobile.selectmenu.prototype.options.nativeMenu = false;
The text of a select menu option runs off the side of the list in A4.
screenshot from A4: http://i.imgur.com/vEHxl.png
screenshot from A3: http://i.imgur.com/KjU7Y.png
I created a JSBin for that: http://jsbin.com/isizo5/3
Fixed in http://jsbin.com/isizo5/4
Smaller CSS fix
Added unit test
This isn't part of the change that Ghislain made, but quirksmode notes that opera requires -o-text-overflow and we were wondering if that applies to mini and mobile.
It appears firefox doesn't support the text-overflow css attribute either:
so that might apply to ff mobile
it'll just chop the text and not generate the ellipsis. There is a brute force routine to generate the ellipsis: http://stackoverflow.com/questions/536814/insert-ellipsis-into-html-tag-if-content-too-wide that we could use on browsers that don't support text-overflow
It works for me. Clipping the text ins't pretty but it works.
Can someone explain exactly what the issue is? Is it that the text is going out of the box or that text-overflow doesnt work?
From the screenshots, I would say that the issue is that the text is going out of the box. @sbierman, can you confirm that this what you meant?
Yes, the text was running outside the menu.
@sbierman Should the text wrap or have an ellipsis?
i would expect ellipsis.
@sbierman Screenshots were taken using Firefox, right?
I can't be certain. It was either Safari or Firefox. I use both frequently.
Just as an FYI the text-overflow: ellipsis is going to be fixed in FF nightlies as of today: https://bugzilla.mozilla.org/show_bug.cgi?id=312156 most likely part of FF6
closed in e8a973f