0

Using jQuery 1.9.1 & have the following code in my CSS for the web page:

.breakword {
-ms-word-break: break-all;
word-break: break-all;
// Non standard for webkit
     word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
font-size: 0.9em; font-weight: normal;
}

The HTML code has:

<td class="breakword" align="left" style="width:54%;vertical-align:middle;">
      <select name="vlist" id="vlist" class="choices">
    </select>
</td>

The select above is populated with results from a SQL query.

It just so happens that one of the items retrieved from the table is longer than the input field. In Firefox, it displays fine on multiple lines. In IE8 however, I cannot get it to display except on 1 line. Also, it will overlay the field next to it.

The data retrieved would be:

<Row>
  <ID>15</ID>
  <vtext>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</vtext>
</Row>
<Row>
  <ID>16</ID>
  <vtext>This is a test item for the dropdown</vtext>
</Row>

What am I missing about getting this to function properly in IE8?

steve_o
  • 1,243
  • 6
  • 34
  • 60

2 Answers2

1

Two issues with the code above

  1. Table cells, ignore widths and expand to accommodate their content
  2. Furthermore, select elements, will grow with their content, unless you specify a width, which will make the element small, but the dropdown list will still span it's full size;

In order to achieve what you want, either set a static width to your select element,

<select style="width:200px"></select>

or have it scale with its table cell. See example JSFiddle here

Dogoku
  • 4,585
  • 3
  • 24
  • 34
  • your JSFiddle answered my question. However, I've noticed something on a couple of IE8 browsers. On one, it works fine & displays the dropdown as it should, with a dropdown arrow at the right of the dropdown. However, on another one (also IE8), it does the same except that the dropdown arrow is not shown. Clicking in the dropdown box activates it & it functions normally, it just doesn't show the dropdown arrow. That browser has Protected Mode checked, but I haven't found any other difference yet. Any ideas? – steve_o Jul 26 '13 at 14:04
0

SELECT (radio and checkbox included) elements are rendered by the OS (not really HTML) and doesn't fully respect CSS, especially in older browsers like IE8.

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176