Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Input > RadTextBox Height 100%

• Mike

  Posted on Feb 3, 2012 (permalink)

  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?

  Reply

• Galin Galin

  Posted on Feb 8, 2012 (permalink)

  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 >>

  Reply


• Mike

  Posted on Feb 24, 2012 (permalink)

  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>

  Reply

• Galin Galin

  Posted on Mar 1, 2012 (permalink)

  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.

  Attached files

  • SamplePage.zip

  Reply

• Mike

  Posted on Mar 1, 2012 (permalink)

  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?

  Reply

• Galin Galin

  Posted on Mar 6, 2012 (permalink)

  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.

  Reply

• Mike

  Posted on Mar 8, 2012 (permalink)

  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?

  Reply

• Galin Galin

  Posted on Mar 9, 2012 (permalink)

  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.

  Attached files

  • Default.zip

  Reply

• Mike

  Posted on Mar 9, 2012 (permalink)

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

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Input > RadTextBox Height 100%