Dropdown in PHP

Question

Hi,

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

Answer 1

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.

Answer 2

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.

Answer 3

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)

Answer 4

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.

Answer 5

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.

Answer 6

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/