CODEWITHSUNDEEP
iphonejqueryandroidhtmljquery-ui
Lukas Eder
Lukas Eder

Reputation: 221370

HTML <select> element is abbreviated in iPhone or Android browsers

I'm in a bit of a situation with my HTML <select> dropdowns, when they are displayed in an iPhone or Android browser. I often need to render <option> labels that are quite long, such as for instance

[AccountType] [EUR] - [Customer] - CH12 3456 7890 1234 5678 9

On Android, this will render something like that:

android screen

On the iPhone it's even worse. While I like the native look and feel, the cropping of the labels is a no-go. Circled in red, you'll find how the dropdown itself is rendered. I could live with that. But check out the blue popup that appears, when I click on it. The user will never find his data...

PLEASE, before you answer...

... consider these points:

Upvotes: 4

Views: 3466

Answers (4)

Elias Zamaria
Elias Zamaria

Reputation: 101203

I ran into the same problem. I wanted an imitation drop-down box similar to the jQuery UI combobox but I didn't want to use jQuery UI so I used this other jQuery selectbox plugin. It is somewhat buggy but better for my purposes than the default iPhone select element.

Upvotes: 2

Lukas Eder
Lukas Eder

Reputation: 221370

While the proposed workarounds given by hunter and Ivan Buttinoni were creative, and good ideas, I had to find a different solution in the end. It now looks similar to jQuery UI's combobox component:

http://jqueryui.com/demos/autocomplete/#combobox

Upvotes: 1

Ivan Buttinoni
Ivan Buttinoni

Reputation: 4145

I try to solve the problem with a different approach, moving out the "long data" from select block into an another kind of form more easy to manage.
Here's a draft of my idea:

<!DOCTYPE html>
<html>
<head>
<style>
.clickme{
        text-decoration: underline;
        color: blue;
}
</style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

    <script type="text/javascript">
        var iban=[
                [{"idx":"11","iban":"CH12 3456 7890 1234 5678 9"},{"idx":"12","iban":"CH12 3333 3333 3333 3333 9"}],
                [{"idx":"13","iban":"CH99 3333 3333 3333 3333 9"}],
                [{"idx":"14","iban":"CH88 3333 3333 3333 3333 9"},{"idx":"15","iban":"CH77 3333 3333 3333 3333 9"}]
                ];


$().ready(function(){

                $(".select_show").change(function(){
                        var testo="";
                        for( var t in iban[ $(this).val() ]){
                                if(testo==""){
                                        testo="Please select one following iban<br/>";
                                }
                                testo=testo + "<div class='clickme' value='"+ iban[ $(this).val() ][t].idx +"'>"+ iban[ $(this).val() ][t].iban +"</div><br/>";
                        }
                        $("#choices").html(testo);

                        $(".clickme").click(function(){
                                $("#hidden1").val($(this).attr('value'));
                                $("#choices").html("thanks");
                        });

                });

});
    </script>

</head>
<body >

<form>
<input type="text" id="hidden1" name="real_select_input" value=""> <br/>
<select class="select_show" id="select1">
        <option selected="selected" value="-1">please select</option>
        <option value="0">[AccountType] [EUR] - [Customer1]</option>
        <option value="1">[AccountType] [EUR] - [Customer2]</option>
        <option value="2">[AccountType] [EUR] - [Customer3]</option>
</select>
</form>
<div id="choices">
</div>

</body>
</html>

Iban is an array of array: the first level contain your different accounts the second one the different profile for each customer.

the "hidden1" is suppose to be hidden :)

PS I was missed the comment of hunter on "Dec 29 '10 at 14:42" pointing this way

Upvotes: 1

hunter
hunter

Reputation: 63562

Are you able to create groups of options to minimize the redundant text?

<option value="-1">[AccountType] [EUR] - [Customer]</option>
<option value="1">CH12 3456 7890 1234 5678 9</option>
<option value="2">CH10 1111 2222 3333 4444 5</option>

Then make the value="-1" unselectable with jQuery

or you could use optgroup elements for organization

<optgroup label="[AccountType] [EUR] - [Customer]">
    <option value="1">CH12 3456 7890 1234 5678 9</option>
    <option value="2">CH10 1111 2222 3333 4444 5</option>
</optgroup>

Upvotes: 5

Related Questions