Is there any way to force an iPad Listbox to show all items in the Listbox ?
I’m currently using 7 Listboxes side-by-side to display letters for a word game.
Eg. Listbox1 displays A, B, C, listbox2 displays D, E, F etc. The idea being that the user can detect a ‘hidden’ word in what is effectively a grid of letters. They then select one letter from each listbox to form the word – which then gets ‘processed’.
Each listbox is sized to show all 3 items.
It works fine on PC/Mac browsers, but on iPad we have this problem:
The listbox initially shows no items at all & then when a listbox is selected, the items get shown in a dropdownlist, then finally only the selected item gets shown in the listbox.
I need ‘normal’ listbox functionally which initially shows all letters (say for a 7 letter word the user needs to see a 3x7 ‘grid’ of letters, & user needs to be able to
select one item from each ‘column’/Listbox.
I currently have this code for iPad to downside text for each listbox:
Dim strUserAgent As String = Request.UserAgent.ToString().ToLower()
If Request.Browser.IsMobileDevice Then
If InStr(strUserAgent, "ipad") Then
Listbox1.Style("font-size") = "6px"
Listbox2.Style("font-size") = "6px” etc. . .
End If
End If
& also this in .css file:
-webkit-appearance: listitem;
Is there any code in code-behind or .css to force the iPad listbox to display items as described ?
Or alternatively, is there another type of control which would give this functionality on iPad ?
surver1953
Member
22 Points
21 Posts
iPad Listbox - is there a way to show all items ?
Nov 13, 2011 02:29 AM|LINK
Is there any way to force an iPad Listbox to show all items in the Listbox ?
I’m currently using 7 Listboxes side-by-side to display letters for a word game.
Eg. Listbox1 displays A, B, C, listbox2 displays D, E, F etc. The idea being that the user can detect a ‘hidden’ word in what is effectively a grid of letters. They then select one letter from each listbox to form the word – which then gets ‘processed’. Each listbox is sized to show all 3 items.
It works fine on PC/Mac browsers, but on iPad we have this problem:
I need ‘normal’ listbox functionally which initially shows all letters (say for a 7 letter word the user needs to see a 3x7 ‘grid’ of letters, & user needs to be able to select one item from each ‘column’/Listbox.
I currently have this code for iPad to downside text for each listbox:
Dim strUserAgent As String = Request.UserAgent.ToString().ToLower()
If Request.Browser.IsMobileDevice Then
If InStr(strUserAgent, "ipad") Then
Listbox1.Style("font-size") = "6px"
Listbox2.Style("font-size") = "6px” etc. . .
End If
End If
& also this in .css file:
-webkit-appearance: listitem;
Is there any code in code-behind or .css to force the iPad listbox to display items as described ?
Or alternatively, is there another type of control which would give this functionality on iPad ?
Any feedback much appreciated.
roopeshreddy
All-Star
20271 Points
3346 Posts
Re: iPad Listbox - is there a way to show all items ?
Nov 15, 2011 10:46 AM|LINK
Hi,
Apple iPhone/iPod Touch/iPad display ListBox as Select control.
If you want ListBox kind of UI, you need to create one using DIV and UL tags!
Hope it helps u...
Roopesh Reddy C
Roopesh's Space
surver1953
Member
22 Points
21 Posts
Re: iPad Listbox - is there a way to show all items ?
Nov 16, 2011 06:29 AM|LINK
many thanks roopeshreddy,
i've had a search of the internet for possible solutions as you suggest - not sure where/how to get started.
Are you able to point to any existing resources to get me started ?
regards
surver1953
roopeshreddy
All-Star
20271 Points
3346 Posts
Re: iPad Listbox - is there a way to show all items ?
Nov 16, 2011 11:55 AM|LINK
Hi,
You can check the following code!
<script type="text/javascript"> var nCount = 0; var prevListItem = null; var curSelectedItem = null; function Insert() { var newElement = document.createElement("li"); newElement.innerHTML = "Option " +nCount ; newElement.setAttribute("onclick", "FetchValue(this);"); document.getElementById('list').appendChild(newElement); nCount++; } function Delete() { try { if (curSelectedItem != null && nCount > 0) { document.getElementById('list').removeChild(curSelectedItem); nCount--; } } catch (e) { } } function FetchValue(listItem) { listItem.style.background = "#FF00FF"; document.getElementById('selectedValue').innerHTML = listItem.innerHTML; if (prevListItem != null && prevListItem != listItem) prevListItem.style.background = "#FFFFFF"; curSelectedItem = listItem; prevListItem = listItem; } </script> <div style="border:1px solid #00FF00;width:150px;height:200px;margin:0px;padding:0px;overflow:auto;"> <ul id="list" style="list-style:none none inside;margin:0px;padding:0px; cursor:pointer; " > </ul> </div> <div> <input type="button" value="Insert" onclick="Insert();" /> <input type="button" value="Delete" onclick="Delete();" /> </div> <div> Selected Item: <span id="selectedValue"></span> </div>The above code shows how to dynamically add data to the custom listbox and delete it. You can also do that by adding static data to it!
Hope it helps u...
Roopesh Reddy C
Roopesh's Space
surver1953
Member
22 Points
21 Posts
Re: iPad Listbox - is there a way to show all items ?
Nov 16, 2011 09:03 PM|LINK
Many thanks roopeshreddy - i'll give that a try.
Very much appreciated.
surver1953