All geek questions in one place

HTML <select> element abbreviated in iPhone or Android browsers

I am a bit like HTML <select> dropdowns when they appear in the iPhone or Android browser. I often have to display <option> shortcuts that are quite long, like

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

On Android, it will look something like this:

android screen

On the iPhone, this is even worse. Although I like the look and feel, label trimming is not-go. Round in red, you will see how the window looms. I could live with that. But pay attention to the blue popup that appears when I click on it. The user will never find his data ...

PLEASE BEFORE ANSWERING ...

... consider these points:

  • I can shorten some information, but I will still have cases with long option shortcuts in select. Therefore, you do not need to tell me that IBAN can be reduced, etc.
  • I cannot rely on CSS styles for <select> or <option> elements.
  • The hunter user has already suggested the <optgroup> tag here . This is a pretty good idea and would be a small workaround, but not enough, since IBAN is still clipped by both iPhone and Android browsers :-(
  • I already know a very beautiful prototype of jQuery UI Selectmenu . Unfortunately, it is not yet compatible with jquery-ui 1.8.5, and there is no guarantee that it will be stable.
  • I use jquery and jquery-ui 1.8.5, so any ideas / links to plugins are very welcome.
  • Any other ideas to get around this GENERALLY issue are welcome .
+4
source share
4 answers

While the proposed workarounds provided by Hunter and Ivan Buttinoni were creative and good ideas, in the end I had to find another solution. Now it looks like a jQuery user interface combobox component:

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

+1
source

Can you create option groups to minimize 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 value="-1" non-selectable with jQuery

or you can use optgroup elements to organize

 <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>
+5
source

I ran into the same problem. I wanted the simulated box to look like a combobox jQuery UI, but I didn't want to use the jQuery UI, so I used this other jQuery selectbox plugin . This is somewhat wrong, but better for my purposes than the default iPhone picker.

+2
source

I am trying to solve a problem with a different approach, forcing "long data" from the selected block into another form, more convenient for management.
Here is 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 arrays: the first level contains your different accounts; the second - a different profile for each client.

"hidden1" is supposed to be hidden :)

PS I was missed the hunter's comment on "December 29, 2010 at 14:42", thus indicating

+1
source

Source: https://habr.com/ru/post/1333679/

More articles:


All Articles