I want to make an HTML table with a lot of text input areas (textarea) that, when clicked on, expand downwards. Right now, when the textarea element gets clicked it expands fine, but it messes up the table layout in the process.

I want something like this

Instead of this ugly thing I'm getting now

Here is my current code

I want to make an HTML table with a lot of text input areas (textarea) that, when clicked on, expand downwards. Right now, when the textarea element gets clicked it expands fine, but it messes up the table layout in the process.

I want something like this

Instead of this ugly thing I'm getting now

Here is my current code

• javascript
• jquery
• html
• css
• layout

• Look up accordion menus – TylerH Commented May 12, 2014 at 20:38
• Have you tried absolutely positioning the textarea whilst it's in transition / editing? – Jimmy Breck-McKye Commented May 12, 2014 at 20:38

4 Answers 4

Instead of manually messing with the CSS values, simply toggle a class. This allows you to easily play with absolute positioning without having messed-up JS. See demo here: http://jsfiddle/8Qa3C/1/

Instead of your current code, use that:

$(document).ready(function() {
    $('[id^="txt"]').focus(function() {
        $(this).addClass('expand');
    });
    $('[id^="txt"]').blur(function() {
        $(this).removeClass('expand');
    });
});

Then you can have some simple CSS like this:

.expand {
    box-shadow: 3px 3px 5px 2px gray;
    height: 150px;
    position: absolute;
    top: 5px;
    z-index: 10;
}

I also added a position: relative; to td.

jsFiddle Demo

You should use positioning to acplish this. Using position:absolute will remove the textarea from the flow of the document and allow it to "pop out" as your animated gif shows.

In order to have the positioning line up, you will also want to set the td to be position:relative in order to adjust the textarea to align to the td padding. A zindex will help to set it above the content as well.

td > textarea:focus{
 position:absolute;
 top:5px;
 z-index:1;
}
td{
 position:relative;
}

For added effect, you can animate the height change

$(this).animate({height:"150px"});

Try the following-

Javascript

$('[id^="txt"]').focusin(function() {
    $(this).addClass("expandtextarea");
});
$('[id^="txt"]').focusout(function() {
    $(this).removeClass("expandtextarea");
});

CSS

.expandtextarea{
    box-shadow: 3px 3px 5px 2px gray;
    height: 150px !important;
    position: absolute;
    margin-top: -12px;
}

This is the same solution with some animation: http://jsfiddle/8Qa3C/2/

$(document).ready(function() {
    $('[id^="txt"]').focus(function() {
        $(this).addClass('expand').animate({
            height: "150px"});
    });
    $('[id^="txt"]').blur(function() {
        $(this).removeClass('expand').css({
            height: "20px"});
    });
});

Or you can also use transitions: http://jsfiddle/yU7ME/1/

$(document).ready(function() {
    $('[id^="txt"]').focus(function() {
        $(this).addClass('expand');
    });
    $('[id^="txt"]').blur(function() {
        $(this).removeClass('expand');
        });
});
.expand {
    box-shadow: 3px 3px 5px 2px gray;
    height: 150px;
    position: absolute;
    top: 5px;
    z-index: 10;
    transition: height 0.5s;
}