none
HTML <select> native menu doesn't wrap items like mobile Internet Explorer RRS feed

  • Question

  • I'm running Windows Phone 8.1, latest developer preview (8.10.14176.243), but I believe this issue has existed for a long time. When using an html <select> element with <option> that have long text, the WebBrowser control does not wrap the text, and as a result the options can get truncated. In certain circumstances, this makes the control unusable as one cannot differentiate between different items in the list.

    In Internet Explorer on the same device, the menu items wrap as expected:

    Is there any way to get the WebBrowser control to do the same? Or is this something that needs to be addressed in a Windows Phone update? If the latter, how can I ensure a bug is filed for the issue?

    Thanks,

    Dan

    Tuesday, October 7, 2014 8:18 PM

Answers

All replies

  • Wrapping is not standard behavior for a <select>. You'll need to implement your own. Compare with the same behavior in IE or Chrome on the desktop, which do not wrap.

    There are several libraries with menu plug-ins which may work better for you than a raw <select> statement.

    IE11 on Windows Phone 8.1 has some non-standard behavior to increase mobile compatibility, but apps have more control and don't have compat behaviours imposed upon them.

    --Rob

    Tuesday, October 7, 2014 11:29 PM
  • Hi Rob,

    Thanks for the response. How a select is rendered is fully user agent dependent; Android, for example, does wrap long elements, and obviously IE does it for a reason as well -- it provides a better UX. Desktop is a little different, as there's significantly more real-estate to work with, so a select can be sized appropriately for its content.

    Can you point me to some libraries with menu plugins that can be invoked from HTML/JavaScript from within a WebBrowser control? If this were a fully native app, it'd be a lot easier for me to use a custom control, but since we're a multi-platform app based on Cordova, and thus using the WebBrowser, I need a drop-in solution that works in that environment -- preferably without rendering it as an HTML menu, as we want it to look/feel as native as possible.

    I'd strongly advocate for this to be a feature request for a future release, as IE already does it, and there isn't really any downside to provide a better user experience.  Hopefully you'll pass this along to the right folks for review.

    Thanks,
    Dan

    Wednesday, October 8, 2014 5:51 AM
  • I can't recommend any specific libraries, but a quick search found several menu plug-ins on http://plugins.jquery.com/?s=menu . I suspect the same exist for other major javascript libraries.

    You can request new features in the Windows Platform Developer Feedback site at http://wpdev.uservoice.com .

    • Marked as answer by Yang,Chenfei Tuesday, October 21, 2014 9:26 AM
    Wednesday, October 8, 2014 9:57 PM
  • Hi Dan,

    Please can you share the sample html file where you have achieved same <option> look: getting native popup.

    Thanks


    Pallam Madhukar Windows Phone Developer

    Tuesday, February 16, 2016 12:18 PM
  • Hi Dan,

    Please can you share the sample html file where you have achieved same <option> look: getting native popup.

    Thanks


    Pallam Madhukar Windows Phone Developer

    It's just a standard HTML <select> element rendered in a WebBrowser control (via a Cordova app). There's nothing special to it.

    Dan

    Tuesday, February 16, 2016 6:02 PM
  • Hi Dan, With the <select> tag, the items are not wrapping right? Can we achieve <select> tag UI with wrapping effect using any html/css? If possible, please provide sample. It will very helpful to me.

    Thanks,

     

    Pallam Madhukar Windows Phone Developer

    Wednesday, February 17, 2016 6:06 AM
  • Hi Dan, With the <select> tag, the items are not wrapping right? Can we achieve <select> tag UI with wrapping effect using any html/css? If possible, please provide sample. It will very helpful to me.

    Thanks,

     

    Pallam Madhukar Windows Phone Developer

    No, in the WebBrowser they do not wrap. This issue was never resolved for me, and I never pursued another solution as I wanted to keep the native UI, so you're on your own with a fix. Sorry.
    Wednesday, February 17, 2016 7:44 AM