CODEWITHSUNDEEP
c#javascriptasp.nethtml
Anuj Kaithwas
Anuj Kaithwas

Reputation: 842

Dynamically increasing the size of a div tag in C#/Javascript based on its child control

I have a div tag in which i have an autogrow textarea. When I press any key or type something within the textarea, its height increases one line at a time. But the problem here is that the size of the div tag is the same, so that looks too bad, like the textarea falling out from the div container... So I want the div tag to also expand simultaneously as the textarea increases. The code below represents the code for the textarea contained within a div tag

<body bgcolor="#CCC" style="height: 460px">
<form id="form1" runat="server" method="post">
<div  id="expandable_div" style="background-color: #000000" >
    <textarea id="Text1"  rows = "8" runat="server" cols="30" onkeyup="AutoGrowTextArea(this)"   name="S1"> </textarea>
</div>
</form>

In the style sheet, I tried putting:

 div#expandable_div
        {
            min-height:205px;
            height:auto;
        }

Upvotes: 1

Views: 1114

Answers (2)

Talha
Talha

Reputation: 19242

<div> should expand automatically. I guess that the problem is that you're fixing the height of div. Let's say...

 height:205px;

Replace it with

min-height:205px;
min-width:300px;

Working Demo on jsFiddle

Upvotes: 1

Alexei Levenkov
Alexei Levenkov

Reputation: 100527

Size of unstyled DIV is defined by its content. So either remove height style from DIV or adjust it dynamically based on size of textarea.

Upvotes: 0

Related Questions