size transition on resizable textarea

Question

I've implemented my textarea, which is shown/hidden with transition animation on hover on its master element:

my LESS:

.my-hidden-textarea textarea{
    width:0px;
    height:0px;
    resize: none;
    .transition(~"width 0.3s, height 0.3s, left 0.3s");
    .box-sizing(border-box);
}
.my-hidden-textarea:hover textarea{
    left:-338px;
    width:350px;
    height:100px;
}

I want to keep the resize option for the textarea, but the problem is that when I resize the textarea, it overrides the size given by the css and when I hover out, the textarea remains opened (no size change).

I tried to add !important, resp: width:0px !important; height:0px !important; .... width:350px !important; height:100px !important; however, now the area is not resizable any more (even with resize:both).

It happens in Firefox 29.0, I haven't tested other browsers but I expect similar problem.

Is there a pure CSS3 solution, or do I have to use javascript for such animation? thanks in advance.

jsFiddle

http://store.amniverse.net/test.htm - try resizing the textarea and hover out then — amik, Jun 06 '14 at 13:30
http://store.amniverse.net/test2.htm - the textarea can't be resized althrough it has the resize control visible — amik, Jun 06 '14 at 13:31
am I missing something? I've never seen rules like your `.transition` and `.box-sizing`? the CSS `resize` property does nothing unless the overflow property is something other than visible, which is the default for most elements. So generally to use this, you'll have to set something like `overflow: scroll;`...as per [css-tricks](http://css-tricks.com/almanac/properties/r/resize/) — MilkyTech, Jun 06 '14 at 15:20
Sorry for the "resize" confusion, It remained in my style from previous experiments. actually, resize:both is default for textarea, you don't need any setting of overflow. This is not the problem, the problem is that manual resize behaves like inline change of style - overrides size changes by changing css class. — amik, Jun 07 '14 at 14:56
Why don't you try something like this [`fiddle`](http://jsfiddle.net/MarmeeK/ec9pC/1/) — MarmiK, Jul 11 '14 at 11:11
If I understand the question correctly, when you hover out, the text area should collapse back to it's original state. Your Fiddle works for me in Chrome and Firefox. And I misunderstanding something? — Colin Bacon, Jul 11 '14 at 15:46
@MarmiK: I don't know if its got anything to do with browser versions, but even in your fiddle I can see the same problem. When you hover on the text area and resize it before hovering out, the text area stays as is even after hovering out. It doesn't go back to its original state. — Harry, Jul 15 '14 at 10:18
@Harry I believe that was OP's problem.. but yet waiting for his reply :) — MarmiK, Jul 15 '14 at 10:22
@MarmiK try opening your fiddle, manually resizing the textarea (drag bottom right corner) and hover out. It won't hide. — amik, Jul 15 '14 at 21:20
The correct solution is actually already written below, thanks all for your help. — amik, Jul 15 '14 at 21:21

score 5 · Accepted Answer · edited May 23 '17 at 12:15

I think a possible solution for your problem have been given at https://stackoverflow.com/a/23618098/1596547.

Set the max-height and max-width properties to zero for the normal state and to a large value for the hover state.

Your Less code:

@import "./mixins/vendor-prefixes.less"; //from Bootstrap 3 
.my-hidden-textarea
{
    textarea {
        width:0px;
        height:0px;
        max-height: 0px;
        max-width: 0px;
        .transition(~"width 0.3s, height 0.3s, left 0.3s");
        .box-sizing(border-box);
    }
    &:hover textarea {
        left:-338px;
        width:350px;
        height:100px;
        max-height: 30em;
        max-width: 300em;
        resize: both;
    }
}

The preceding Less code will compile into the following CSS code:

.my-hidden-textarea textarea {
  width: 0px;
  height: 0px;
  max-height: 0px;
  max-width: 0px;
  -webkit-transition: width 0.3s, height 0.3s, left 0.3s;
  -o-transition: width 0.3s, height 0.3s, left 0.3s;
  transition: width 0.3s, height 0.3s, left 0.3s;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.my-hidden-textarea:hover textarea {
  left: -338px;
  width: 350px;
  height: 100px;
  max-height: 30em;
  max-width: 300em;
  resize: both;
}

size transition on resizable textarea

1 Answers1