iphone dropdownlist - text too long and overflow

• GIB

  18 Jan 08, 14:18

  I checked using Safari 3 for Windows and it is OK.
  
  But in iPhone Safari, when the text is too long, it displays outside of the dropdownlist. The dropdownlist has a fixed pixel width using style="width: 100px".
  
  Any ideas how to make it not display outside the list.
  
• ndmmxiaomayi

  18 Jan 08, 15:44

  Write your own CSS and load it.
• GIB

  18 Jan 08, 16:36

  Originally posted by ndmmxiaomayi:

  Write your own CSS and load it.

  Sorry, come again!
  
  What my own CSS? What do you mean by load it?
  
  My code is something like below:
  
  AhmericaPeople's Democratic Republic of Korea
  
  Inside iPhone Safari browser, when the selected value is the Korea one, it display as though there is an overflow: display on the .Problem is only iPhone Safari has this display issue. The desktop version of Safari does not display the overflow which is what I want.Obviously the code above is just a sample, not the real thing. The real thing is generated from PHP codes. I just need help from the CSS point of view. Is there any CSS code that iPhone Safari can accept that will truncate the display.Picture from iPhone below:The picture is showing what I DON'T want. I want it to be like normal browsers.
• ndmmxiaomayi

  18 Jan 08, 16:52

  I'm not near my PC now. I'll get back to you when I'm home.
• ndmmxiaomayi

  18 Jan 08, 18:43

  Wait. Is this your own webbie or ?
• GIB

  18 Jan 08, 19:14

  Originally posted by ndmmxiaomayi:

  Wait. Is this your own webbie or ?

  Yes, I am developing this website for a customer. It is for iPhone.
  The screenshot that I posted is from the customer's iPhone.
  
  He ask if there is a way to fix the long words problem.
• ndmmxiaomayi

  18 Jan 08, 19:33

  Since it's going to be generated by a script... might as well have the script to detect the screen resolution and adjust the CSS accordingly.
  
  As for the CSS...
  
  Something similar to this JS (not to be implemented)
  
  http://myflashbox.sg/flashbox.js
  
  The script will tell the screen solution, read the JS file and resize it accordingly.
  
  That will hopefully resize it to something suitable.
  
  Latecomer will know this better than me.
• LatecomerX

  18 Jan 08, 19:36

  Try wrapping the select inside a div with a fixed width and overflow: hidden.
  
  I go write out a demo and see if it works.
  
• LatecomerX

  18 Jan 08, 19:59

  It works, but the select form element will appear truncated and the user doesn't see the dropdown arrow at the end.
  
  http://latecomerx.com/lab/test/GIB.20080118.php
  
• GIB

  18 Jan 08, 20:23

  Maybe you can try these:
  
  AhmericaPeople's Democratic Republic of Korea
  
  or
  
  AhmericaPeople's Democratic Republic of Korea
  
  But need to view inside an iPhone which I don't have.
• LatecomerX

  18 Jan 08, 20:38

  Originally posted by GIB:

  Maybe you can try these:
  
  AhmericaPeople's Democratic Republic of Korea
  
  or
  
  AhmericaPeople's Democratic Republic of Korea
  
  But need to view inside an iPhone which I don't have.

  Me neither. But if you are running on a Mac, you may want to try iPhoney which simulates a web browser in an iPhone.
  
• GIB

  18 Jan 08, 20:44

  Originally posted by LatecomerX:

  Me neither. But if you are running on a Mac, you may want to try iPhoney which simulates a web browser in an iPhone.
  

  No Mac, MS all the way. Was using http://iphonetester.com/ for testing. But nothing can replicate iPhone Safari's way of rendering stuff.
  
  Guess I just have to modify some codes and then wait for the customer to feedback to me. See if those code did the job or not.
  
  By the way, thanks for all the suggestions. Just have to hope one of those two CSS works. If not, gotta go trawl Google again.