CODEWITHSUNDEEP
jquerycssjquery-ui
Scott McDermott
Scott McDermott

Reputation: 13

jQueryUI effects on table columns

Trying to use jQueryUI to slide a table column out of view, and then back in. Sadly, it does not appear to retain the correct column widths and positions, so the column ends up in the wrong place.

The distilled version of the problem I'm hitting is at http://jsfiddle.net/Z76xE/6/ . I've seen a number of different variants of undesired behavior, but the straightforward case pointed to here only gets confused on the expand operation: it first expands the column to be bigger than the 150px that the CSS fixes it to be, and then at the end snaps its left edge over to make the column 150px again, leaving empty white space on the left side of the table.

In endless hours of playing with this and tracing through JavaScript, I've realized that jQuery is getting a different column width than the CSS declared. So I'm doing something wrong in [not] telling jQuery / jQueryUI to update its understanding of column widths. I just don't know where!

Thanks for any thoughts.

Upvotes: 1

Views: 566

Answers (1)

mu is too short
mu is too short

Reputation: 434785

If you watch your animation with your DOM inspector open, you'll see that the <td> gets wrapped in a <div> and that <div> gets animated. However, this:

<tr>
    <div>
        <td></td>
    </div>
</tr>

is invalid HTML so who knows what sort of strange and wonderful things the browser is going to with that. We do know one strange thing that it will do with that: it will leave the <td> in the wrong place when you animate it open.

Messing around with positioning and display of table elements is a bit of a nightmare so you're better off avoiding it. If you change your HTML to this:

<td>
    <div id="NavColumn">
        I am the left-side column
    </div>
</td>

then you'll have better luck: http://jsfiddle.net/ambiguous/VUvCw/

You'll have to adjust the CSS a bit to get the visual layout you want but that structure should get your animation sorted out.

Upvotes: 1

Related Questions