Solved

HTML Select Not Displaying as Listbox in Safari Moble iPhone4s?

Posted on 2014-01-16
14
3,164 Views
Last Modified: 2014-01-22
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
Comment
Question by:WorknHardr
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 6
14 Comments
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39786248
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
 

Author Comment

by:WorknHardr
ID: 39786751
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
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39786875
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
SendBlaster Pro 4 - Bulk Email Sending Software

SendBlaster 4 Pro - Best Bulk Emailing Sending Software
Automatic Subscribe / Unsubscribe Processing
Great for Newsletters & Mass Mailings
Optional HTML & Text Composition
Integration with Google Features
Built in Spam Score Checking
Free Professional Templates - Feature Packed!

 

Author Comment

by:WorknHardr
ID: 39787084
Try it in Safari mobile (iPhone)...
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39787102
All I have is emulators.  Do you have a screen shot?
0
 

Author Comment

by:WorknHardr
ID: 39787405
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
 

Author Comment

by:WorknHardr
ID: 39787474
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
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39787486
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
 

Author Comment

by:WorknHardr
ID: 39788181
Currently I have only 2 items in each of the top four listboxes. I think Safari mobile has a seriously bad bug.
0
 

Author Comment

by:WorknHardr
ID: 39788220
Chrome mobile doesn't render Listbox correctly either, same as Safari mobile.
0
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 250 total points
ID: 39789219
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
 

Author Comment

by:WorknHardr
ID: 39789569
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
 

Author Closing Comment

by:WorknHardr
ID: 39801330
I still don't have a good solution, thanks for helping me this far, I think we're fighting browser-bug...
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39801750
Glad to help, I think you're probably right.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
google exe file 5 210
Apple.com Account Security Lockout - SCAM? 3 82
cannot view videos at msnbc 12 77
send to option in chrome 11 55
I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

737 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question