RadTextBox Height 100%

9 posts, 0 answers
  1. Mike
    Mike avatar
    14 posts
    Member since:
    Mar 2010

    Posted 03 Feb 2012 Link to this post

    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?
  2. Galin
    Admin
    Galin avatar
    526 posts

    Posted 08 Feb 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mike
    Mike avatar
    14 posts
    Member since:
    Mar 2010

    Posted 24 Feb 2012 Link to this post

    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>
  5. Galin
    Admin
    Galin avatar
    526 posts

    Posted 01 Mar 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Mike
    Mike avatar
    14 posts
    Member since:
    Mar 2010

    Posted 01 Mar 2012 Link to this post

    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?
  7. Galin
    Admin
    Galin avatar
    526 posts

    Posted 06 Mar 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  8. Mike
    Mike avatar
    14 posts
    Member since:
    Mar 2010

    Posted 08 Mar 2012 Link to this post

    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?
  9. Galin
    Admin
    Galin avatar
    526 posts

    Posted 09 Mar 2012 Link to this post

    Hi Mike,

    Check out in the attached file.

    Regards,
    Galin
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  10. Mike
    Mike avatar
    14 posts
    Member since:
    Mar 2010

    Posted 09 Mar 2012 Link to this post

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

    Thank You!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017