0

I implemented a function which is able to show/hide the content of a table row or column with a sliding animation.

What the code does:

  1. Retrieve all cells of the column (th, td)
  2. Wrap the content of each cell in a <div class="wrapper" />
  3. Animate the width of the wrapper div with jQuery.animate();
  4. After finishing, unwrap the cell contents (remove the div)

The reason why I need the wrapping div is because jQuery can't perform a slide animation on table cells directly - see How to Use slideDown (or show) function on a table row?

See this codepen for the code and demonstration. I removed as much JS code as possible to demonstrate my problem. (You can ignore the html and css, they don't contain relevant information)

Everything works perfectly for rows and columns, in except of one (two?) problems:

  • When a column is shrinked, the content eventually starts wrapping when there's not enough space left. When this happens, the cell height suddenly increases, resulting in an ugly jump.

  • When a cell content doesn't need the whole space of it's cell, the show-animation for this content is faster, resulting in ugly output.

enter image description here

What I want to achive is a constantly changing width without affecting the layout. The other columns must not be affected. Any ideas how I can achieve that?

Community
  • 1
  • 1
maja
  • 17,250
  • 17
  • 82
  • 125

1 Answers1

0

You could nest your div in another div with overflow hidden: 

.crop {
    overflow:hidden; 
    width:100px
}
.inner { 
    min-width:300px; 
    width:auto; 
}

http://jsfiddle.net/mikatalk/7xwLjp2e/

maja
  • 17,250
  • 17
  • 82
  • 125
mika
  • 1,411
  • 1
  • 12
  • 23
  • You're setting the width - when I start expanding the column, I don't know it's final width, so I can't set it. Without the width, wrapping it in another div has no effect: http://codepen.io/anon/pen/MYOoEo?editors=001 – maja Feb 06 '15 at 18:05
  • The width I am setting (300px) would be the max width of the layout. – mika Feb 06 '15 at 18:07
  • In my case, the layout of the table might change while it is hidden - the content of each cell can be modified, and after everything is done, the column is animated in. Therefore I don't know the max width (it is unclear until the browser rendered everything - which only happens after the animation finished). – maja Feb 06 '15 at 18:13
  • Maybe just set a min width at least – mika Feb 06 '15 at 18:19