CODEWITHSUNDEEP
jqueryhtmlcss
user169867
user169867

Reputation: 5870

animate div width styled as table-cell

I've created 2 columns. The 2nd is 240px wide and the 1st takes all available width.

The below displays fine in IE8 & FF3.6:

/*My Styles*/
div.table { display:table; border-collapse: collapse; table-layout:fixed; width:100%; border-spacing:0; padding:0; margin:0;}
div.cell  { display:table-cell; overflow:hidden;vertical-align:top;}


<div class="table">    
        <div class="cell" style="width:100%">
            <div id="tblWFWrap" class="tblWrap">
                <div id="tblWF" style="overflow:hidden">
                    <!--Content-->
                </div>
            </div>
        </div>

        <div id="wfCol" class="cell" style="width:240px;">
            <div id="ulWF" class="tblWrap" style="width:240px">
                <!--Content-->
            </div>
        </div>        
</div>

The problem is that I wish to animate the width of the 2nd cell from 240px to 0. Both browsers fail to display the 2nd column during the animation. (It runs off the screen as if the table layout was auto instead of fixed)

I've been using jQuery 1.4 to do the animation though I'm open to a custom written Javascript implementation if this is a bug in jQuery.

My jQuery code is basically:

$("#wfCol").animate({ width: 0 });

I'd greatly appreciate any help animating this thing :)

Upvotes: 0

Views: 1744

Answers (2)

user169867
user169867

Reputation: 5870

I believe I've got a work around. For some reason animating maxWidth instead of width works.

So:

<div id="wfCol" class="cell" style="width:240px; max-width:240px">
        <div id="ulWF" class="tblWrap" style="width:240px">
            <%=DashboardController.GetWorkflowString()%>
        </div>
    </div>

and

$wfCol.animate({ maxWidth: 0 });

Works... Wierd but I'll take it :)

Upvotes: 2

Nick Craver
Nick Craver

Reputation: 630389

Just remove the 100% width delcaration, the <div> will expand to the width by default and not give the behavior you're talking about:

div.table { display:table; border-collapse: collapse; table-layout:fixed; border-spacing:0; padding:0; margin:0;}

Upvotes: 0

Related Questions