RadTextBox Height 100%

[Mike]

I have a table cell that is set to 100% height with a RadTextBox in it.  I want the RadTextBox height to also be 100% and seem not to be able to get this to happen.  The TextMode is set to MultiLine.  I've tried setting the Height property and it yields no results.  There is no way of determining the amount of rows to populate the Rows property properly to make the RadTextBox expand to fit the whole table cell.  Is this possible with this control?

[Galin]

Hello Mike,

There is padding on the cell, which contains this RadTextBox and this prevents the control to occupy the full height. You can reset this padding with the following CSS rule

div.RadGrid .rgRow td,
div.RadGrid .rgAltRow td
{
   padding-top: 0;
   padding-bottom: 0;
}

Additionally, you can use the CssClass property of HeaderStyle and use the corresponding class to reset the padding on specific column, e.g.

div.RadGrid td.specificCell
{
   padding-top: 0;
   padding-bottom: 0;
}

I hope this helps.

Greetings,
Galin
the Telerik team

[Mike]

I am not using a RadGrid for this.  It is inside a normal HTML table:

<table>
    <tr>
        <td>Some Text 1</td>
        <td style="height:100%; vertical-align:top;" rowspan="7"><telerik:RadTextBox runat="server" ID="RadTextBox1" TextMode="MultiLine" Height="100%" /></td>
    </tr>
    <tr><td>Some Text 2</td></tr>
    <tr><td>Some Text 3</td></tr>
    <tr><td>Some Text 4</td></tr>
    <tr><td>Some Text 5</td></tr>
    <tr><td>Some Text 6</td></tr>
    <tr><td>Some Text 7</td></tr>
</table>

[Galin]

Hello Mike,

Due to specific browser behavior and w3c standards you can't stretch a block element inside a table without some "hacks". You should set position: absolute, top: 0 and bottom: 0 to the inner element.

Additionally, I have prepared a demonstration project. You can find it in the attached file. Please check it out and let me know how it goes.

All the best,
Galin
the Telerik team

[Mike]

I did get the textbox to stretch to 100% if I set the style:

<style type="text/css">
.riSingle,
.riTextBox { height:100%; }
</style>

and have the textbox within a div set to absolue with top and bottom set to 0.  However, the table has to be set to relative.  This doesn't work if there is a row above and below the textbox row like the following table:

<table>
<tr><td colspan="2">Some Text 1</td></tr>
<tr>
<td>Some Text 2</td>
<td style="height:100%; vertical-align:top;" rowspan="7"><telerik:RadTextBox runat="server" ID="RadTextBox1" TextMode="MultiLine" Height="100%" /></td>
</tr>
<tr><td>Some Text 3</td></tr>
<tr><td>Some Text 4</td></tr>
<tr><td>Some Text 5</td></tr>
<tr><td>Some Text 6</td></tr>
<tr><td>Some Text 7</td></tr>
<tr><td>Some Text 8</td></tr>
<tr><td colspan="2">Some Text 9</td></tr>
</table>

It appears that having a relative object within a table cell set to 100% doesn't work nicely.  Is there any other workarounds?

[Galin]

Hello Mike,

I am afraid that there are no other straightforward workarounds to this problem. As you have noticed it is even not directly related to RadInput, as this would also happen with any other element in place of the RadTextBox.

An alternative would be to use javascript to calculate the height of the cell and set it dynamically to the element in pixels instead of percent.

I hope this helps.

Greetings,
Galin
the Telerik team

[Mike]

I've seen there has not been a way of accomplishing this using percentages.  Would you have an available javascript sample that would dynamically set the height in pixels?

[Galin]

Hi Mike,

Check out in the attached file.

Regards,
Galin
the Telerik team

[Mike]

That worked out very nicely and I'm sure others will benefit from this too.

Thank You!