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

• • Reply
  

  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:
  
  

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

   

  Any feedback much appreciated.

• • Reply
  

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

  Thanks & Regards
  Roopesh Reddy C
  Roopesh's Space
  
• • Reply
  

  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

• • Reply
  

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

  Thanks & Regards
  Roopesh Reddy C
  Roopesh's Space
  
  • Marked as answer by Ming Xu - MSFT on Nov 28, 2011 11:31 AM
• • Reply
  

  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