asked on

Table resizing with YUI Autocomplete under Firefox

I recently integrated the YUI (Yahoo User Interface) Autocomplete widget into our web application. For historical reasons, the application uses table-driven layout, where the autocomplete fields are typically in the second column of a table. In IE, everything works great. In Firefox, as I scroll through the options, the first column is incrementally resized, getting smaller and smaller.

Has anybody seen behavior like this? I'm at a loss.

basicinstinct

Hi - I have no experience with this yuo widget, but it sounds like the first column is getting smaller because as you scroll down the autocomplete suggestions in the second column get bigger, so the second column takes up more room and "squashes" the first column... could that describe the behaviour you are seeing?

arktech

ASKER

Ah, if only it were that simple. No, this behavior is downright strange. I have a three-column table with about 12 rows. In each row, there is a text label in the first cell, a YUI Autocomplete widget in the second cell (consisting of an input tag and a div tag), and a button in the third cell. Using one of the autocompletes that I know contains three options -- the first one being 15 characters long, the second one 12 and the last one 10 -- I see similar behavior as I scroll through. As I move up and down (either way, from shorter to longer or longer to shorter, doesn't matter), the first and third columns appear to shrink, though the second column does not change size, only relative position. So the autocomplete field moves closer and closer to the label, and the button moves closer and closer to the autocomplete field. Eventually the label begins to wrap. In rare cases (and no, I haven't spotted a pattern to this), on the 13th or 14th transition, suddenly the columns jump back to their original widths and the cycle starts all over again. Generally, though, the table just stays all squished together.

A typical row in this table looks like this:

<tr>
<td>Label:</td>
<td>
<input type="text" id="widget" name="widget" class="addressField">
<div id="widgetContainer" name="widgetContainer" class="addressField">
<input type="hidden" id="widgetValue" name="widgetValue">
</td>
<td> 
<input TYPE="button" class="eventbutton" name="widgetAdd" value="Add" TITLE="Add Widget">
</td>
</tr>

From the CSS file:

.addressField, .addressField .yui-ac-content {
width: 30em;
}

basicinstinct

i can't see how to approach this myself unless i can replicate the behaviour...
you don't have a test site up somewhere where we can see this nastiness in action do you...?

arktech

ASKER

Not yet, though it should be on a site I could give you access to in about a week or so. (This is part of a major enhancement in our 4.0 release, and 3.51 moves to beta next Friday, which will free up the externally-accessible alpha environment.) I'll post a comment when that happens and we can try to coordinate getting you access to the app.

ASKER CERTIFIED SOLUTION

arktech

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

nkkarn

Add this css. the is make it scrollable
#myAutoComplete {
width:20em; /* set width here or else widget will expand to fit its container */
padding-bottom:20em; /* allow enough real estate for the container */
}
.yui-skin-sam .yui-ac-content { /* set scrolling */
max-height:18em;overflow:auto;overflow-x:hidden; /* set scrolling */
_height:18em; /* ie6 */
}