Dropdown in PHP

Question

I am using PHP 5.2 on SUN OS server. Having problems with the following piece of code that for a drop down:

echo '<form action="" method="get">';
echo '<p>Information:<br />';
echo '<select name="acctno" style="width: 100px;">';
foreach ($this->account_names as $acctno => $acctname) {
   echo '<option value="'.$acctno.'">'.$acctname.'</option>';
   }
echo '</select> <input type="submit" value="view" />';
echo '</form>';

Worked perfectly fine on Firefox and Chrome; however there is a problem with Internet Explorer.

In IE the dropdown width is limited to the size i.e 100px. So only the first 15-16 characters of the account name are displayed all the time. However in chrome or firefox, even if only 15-16 characters are displayed initially, when the drop down arrow is clicked upon, it show the entire name (however long it may be). This does not happen with IE. So if the account name is, lets say, "1223456789abcdefghijkl" then: For IE: shows only "123456789" all the time Ffor chrome or firefox: shows "123456789" and when it is dropped down it show the full name as "123456789abcdefghijkl". Any help here would be much appreciated.

Thanks, VP

Try to format your code properly. Dont just post a bunch of code in plain text. Your question seems to be specific to IE where as you seem to think of it as PHP specific. — schar, Apr 09 '10 at 21:49
I formatted the question and re-tagged. Hope you don't mind. — David Thomas, Apr 09 '10 at 21:50
possible duplicate of http://stackoverflow.com/questions/73960/dropdownlist-width-in-ie — mercator, Apr 09 '10 at 23:32

score 3 · Answer 1 · answered Apr 09 '10 at 21:45

3

This isn't a PHP problem, it's a CSS problem.

Because I'm assuming it's rendering the code right, and this is only broken in one browser, it's a browser specific bug which you have to diagnose. If you post a link to the site or the CSS / HTML output that would help us help you.

answered Apr 09 '10 at 21:45

Josh K

28,364
20
86
132

Thanks Josh. However I cannot paste the link here since its an enterprise website. But i can probably send u images so that you could have a better idea. Let me work on that right away. – zack Apr 09 '10 at 21:50
2

Just paste the html output from the script. And as mentioned before this is not a php based problem but a css/html IE specific problem. – Hultner Apr 09 '10 at 21:52
BTW I am using IE 8 (if that makes a difference compared to previous versions of IE) – zack Apr 09 '10 at 22:02
I get it that it is not a php problem. You want me to paste the drop down specific html output from the page source for both IE and firefox correct?? – zack Apr 09 '10 at 22:06
@Ricebowl: Here is the html from the results page displayed.
Detailed Committee Information:

I am sorry for the late reply. I hope this helps you in helping me. Thanks. – zack Apr 13 '10 at 19:42

score 1 · Answer 2 · answered Apr 09 '10 at 22:15

The problem has nothing to do with PHP, and only a bit with CSS and HTML. The main cause is that the standard (intentionally) does not specify exactly how drop-down controls should work. If you look at the standard, it doesn't even mandate the use of a dropdown box at all. Even the draft HTML 5 standard does not specify how the mandated functionality is to be implemented. The standard allows the control to show all options on a full-screen 3d cube if the browser implementer wants to, as long as it allows an option to be selected.

If you want precise control over what your dropdown looks like, you have to create one in javascript and fake the functionality.

Yeah..I will have to write a workarounf using Java..thats what I figured out in the meantime too..thanks anyways.. — zack, Apr 13 '10 at 19:44

score 0 · Answer 3 · answered Apr 09 '10 at 21:47

0

That has nothing to do with PHP .. the length of the dropdown box is handled most probably with the CSS and both browsers have their own way of limiting the size.

answered Apr 09 '10 at 21:47

Sabeen Malik

10,816
4
33
50

score 0 · Answer 4 · edited May 23 '17 at 12:01

0

This is a known bug/feature in IE (and there is a duplicate SO question).

In IE if you set the width, IE takes that as the exact width for the select list and all options regardless of length.

All non-IE browsers realize that when the select list opens, if some of the options are larger than the specified select width, to widen the (unstylable) drop list to suit since CSS has no control over it.

Since the non-IE browsers have a usable select list I take "their" version to be correct. IE's follows the requested width, but isn't flexible when the content doesn't fit.

In IE7 or above, you can set a title="..." attribute on the options so that a tooltip is provided for truncated options (note in IE6 this doesn't work)

edited May 23 '17 at 12:01

Community

1
1

answered Apr 09 '10 at 21:59

scunliffe

62,582
25
126
161

Thanks. I will try the setting the title attribute for every option. At least that might look better than what it is right now. So basically if you are using IE nothing can be done here since all IE versions are inflexible? – zack Apr 09 '10 at 22:14
There's a bunch of hacks. You can set the title attribute for IE7 & IE8, or build something that "looks" like a select list, but works better, or you can try to set the width to "auto" when the user activates that control (this will stretch the entire select list)... none of it is "perfect". – scunliffe Apr 09 '10 at 22:26

David Thomas · Answer 5 · 2010-04-09T22:33:56.960

Okay, I'm being a tad lazy -and optimistic- but having tested this in both Firefox and Chrome, albeit only on Ubuntu 9.10, the theory -at least- is sound:

<style type="text/css" media="all">

    select  {
        width: 5em; /* initial width, adjust to taste */
        }

    select:focus,
    select:active
        {
        width: 12em; /* the width of the select box in its focussed/active state */
        }

</style>

To be honest I suspect it won't work on IE -otherwise it'd be easy- so I'm thinking that either using the title as suggested elsewhere, or perhaps jQuery/js to adjust the width of the select to its widest/longest child option element on focus, might be the best bet.

Edited to add link to a live demo of the above: http://davidrhysthomas.co.uk/so/select.html

And, good lord, it works on IE too. Though perhaps only on IE8 with a xhtml 1.0 strict doctype on XP SP3.

score 0 · Accepted Answer · answered Apr 09 '10 at 23:02

0

This is an IE browser issue. It can't be fixed with css, but you can use javascript to fix it.

http://css-tricks.com/select-cuts-off-options-in-ie-fix/

answered Apr 09 '10 at 23:02

timrwood

10,611
5
35
42

Dropdown in PHP

6 Answers6