[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3373
  • Last Modified:

HTML Select Not Displaying as Listbox in Safari Moble iPhone4s?

I dev in .net, specifically C# MVC 4, and would like to know how to solve an issue concerning the html Select not displaying as a listbox using Safari Moble on my iPhone4s (ios 7.0.4)

Q. Will Safari mobile ever display the html Select correctly in future versions?

Q. Is the html Select not something Safari mobile is capable of rendering?

Note: Safari for Windows (5.1.7) does display the html Select correctly!
0
WorknHardr
Asked:
WorknHardr
  • 8
  • 6
1 Solution
 
Dave BaldwinFixer of ProblemsCommented:
In my code there has been no problem displaying and using a normal HTML <select> on iPhones or any other phones like Androids.  Show us the HTML from the view source of your page.
0
 
WorknHardrAuthor Commented:
Okay, here is the 'View Source' from Safari Mobile

    //using html 'select'
     <select name="sometext" multiple="multiple">
            <option value="1">text1</option>
            <option value="1">text2</option>
            <option value="1">text3</option>
     </select>

     //using Html.ListBox
     <select id="listbox1" name="listbox1" multiple="multiple">
            <option value="1">First item</option>
           <option value="2">Second item</option>
           <option value="3">Third item</option>
     </select>
0
 
Dave BaldwinFixer of ProblemsCommented:
I get the same display in all browsers (Firefox, Chrome, and Safari on Mac) for that code.  It shows 4 rows and the items you show are the first three rows.  The fourth row is blank.
0
Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

 
WorknHardrAuthor Commented:
Try it in Safari mobile (iPhone)...
0
 
Dave BaldwinFixer of ProblemsCommented:
All I have is emulators.  Do you have a screen shot?
0
 
WorknHardrAuthor Commented:
I'll post a pic soon as I figure-out how to get a screen-shot of my iPhone.

Also, downloaded and installed the 'Electric Mobile Studio' trial ($39.00) from here:
http://visualstudiogallery.msdn.microsoft.com/6bed5adb-1d6a-483d-9e22-ae0f88ec4477

I run my web app with the VS2012 'browse with' feature and it works fine in their emulator.
This still doesn't prove why the Safari mobile on iPhone 4s (ios 7.0.4) renders a ListBox as a DropDown.
0
 
WorknHardrAuthor Commented:
Here's the iPhone screenshot..

Note: even though the screenshot listbox says '0 items', I can still tap the listbox and select items just like a dropdown.

In case you've never done an iPhone screenshot:
https://discussions.apple.com/thread/3739872?tstart=0
iPhone-Listbox.png
0
 
Dave BaldwinFixer of ProblemsCommented:
On other browsers, if you put more than 4 items in the list it becomes a drop down.  Although in Firefox it still displayed 4 lines with a scroll bar.  I guess that would be a 'scroll' down.
0
 
WorknHardrAuthor Commented:
Currently I have only 2 items in each of the top four listboxes. I think Safari mobile has a seriously bad bug.
0
 
WorknHardrAuthor Commented:
Chrome mobile doesn't render Listbox correctly either, same as Safari mobile.
0
 
Dave BaldwinFixer of ProblemsCommented:
That makes it a Webkit mobile problem since Safari and Chrome are both based on Webkit.  I found that some people have created alternate methods and 'plugins' to use select multiple on those browsers.
0
 
WorknHardrAuthor Commented:
Webkit, found this link about 'appearance' and 'listbox'
http://www.paulund.co.uk/changing-appearance-of-element-with-css

I tried this css, and not work either to change look

[styleshteet]
.listboxx {
        -webkit-appearance:listbox;
        -moz-appearance:listbox;
    }

[view]
 <select name="sometext" multiple="multiple" class = "listboxx">
                    <option value="1" selected="selected">text1</option>
                    <option value="1">text2</option>
                    <option value="1">text3</option>
                </select>
0
 
WorknHardrAuthor Commented:
I still don't have a good solution, thanks for helping me this far, I think we're fighting browser-bug...
0
 
Dave BaldwinFixer of ProblemsCommented:
Glad to help, I think you're probably right.
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

  • 8
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now