iPad Listbox - is there a way to show all items ?

Is there any way to force an iPad Listbox to show all items in the Listbox ?

Im 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

& 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.

Re: iPad Listbox - is there a way to show all items ?

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...

Re: iPad Listbox - is there a way to show all items ?

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

Re: iPad Listbox - is there a way to show all items ?

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...

Re: iPad Listbox - is there a way to show all items ?

Many thanks roopeshreddy - i'll give that a try.

Very much appreciated.

surver1953