CODEWITHSUNDEEP
jqueryhtmlcss
user1941871
user1941871

Reputation: 139

How to expand/decrease height of table cell?

Got a Jsfiddle where I have a textarea which fills a table cell. But what I need help with is can somebody create a function in the fiddle where the user expands or decrease the size of the table cell. I want to test my css to see if the textarea can fill the textarea if the table cell height is increased or decreased?

Here is the fiddle: http://jsfiddle.net/BpWes/1/

Below is the code from fiddle:

HTML:

        <table id="tbl">
        <tr>
        <th>Question</th>
        </tr>
        <tr>
        <td class="question">
         <textarea class="textAreaQuestion" id="mainTextarea"  name="questionText"></textarea>
            </td>
        </tr>
        </table>

Jquery:

$('textarea').css('background','#EAEAEA');

CSS:

td{ vertical-align:top}


#tbl{
border:1;
height:250px;    
}

.question{     
    border:1px black solid;
    padding: 0;
    height:100%
}

.textAreaQuestion{
    width:100%;

    height:100%;
    border:0;
    padding:0;
    font-size:100%;  

    margin:0;

}

UPDATE:

HTML:

 <table id="tbl">
        <tr>
        <th>Question</th>
        </tr>
        <tr>
            <td class="question">
<div class="divheight">
    <textarea class="textAreaQuestion" id="mainTextarea"  name="questionText"></textarea>
                </div>
            </td>
        </tr>
        </table>

CSS:

.question{     

        border:1px black solid;
        padding: 0;
    }

    .divheight{
    height:100%
    }

Upvotes: 1

Views: 3173

Answers (2)

Nandu
Nandu

Reputation: 3126

here is an example,I think it helps you

http://jsfiddle.net/BpWes/37/

click on the button,you can see the text area fills the table cell when we change the height and width.

html

    <table id="tbl">
        <tr>
        <th>Question</th>
        </tr>
        <tr>
        <td class="question">
         <textarea class="textAreaQuestion" id="mainTextarea"  name="questionText"></textarea>
            </td>
        </tr>
        </table>
<input type ="button" value="expand" id ="expand"/>

jquery 

  $('textarea').css('background','#EAEAEA');

$("#expand").click(function(){    
$(".question").height(500);
$(".question").width(500);
 });

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

Please check this fiddle, whether it solves your problem.

var cell = $('td.question');

$('.increase').click(function(){
    cell.height(cell.height()+20);
});
$('.decrease').click(function(){
    cell.height(cell.height()-20);
});

Upvotes: 1

Related Questions