RadTextBox: Width 100 percent does not work correctly

7 posts, 0 answers
  1. Yuri
    Yuri avatar
    3 posts
    Member since:
    Jan 2008

    Posted 02 Feb 2009 Link to this post

    Hi,
    We bought Telerik ASP.NET controls, and I'm now trying to use a RadTextBox in a stretchable layout. I set RadTextBox's Width to
    new Unit(100, UnitType.Percentage) 
    but in runtime I see that width is dynamically maintained by Telerik's scripts directly on <input> using "style" attribute and is always set to exact pixel value. And Telerik's scripts make the width visually correct (logically 100% in a layout) only on initial page load. If I resize browser window after page is loaded, width of RadTextBox is not updated and ruins layout.

    From forum posts I see that Width handling is a known problem here. But since we are bound by contract terms to deliver application by a fixed deadline, I need at least know when the bug will be fixed by Telerik and released to customers.

    Can you give us estimates on when the Width fix will be released?
  2. Dimo
    Admin
    Dimo avatar
    8456 posts

    Posted 02 Feb 2009 Link to this post

    Hi Yuri,

    You can subscribe to the browser window resize event and execute the repaint() method of the RadTextBox client object. Alternatively, you can place the RadTextBox inside a RadSplitter pane and in this case the control will resize automatically on browser window resize. Here is an example:


    <%@ Page Language="C#" %> 
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <html xmlns="http://www.w3.org/1999/xhtml"
    <head runat="server"
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <title>RadControls for ASP.NET AJAX</title> 
    <style type="text/css"
    html{overflow:auto} 
    html,body,form{margin:0;height:100%;padding:0} 
    </style> 
    </head> 
    <body> 
    <form id="form1" runat="server"
    <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
     
    <p><strong>Resize the browser window:</strong></p
     
    <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="40%"
        <telerik:RadPane ID="RadPane1" runat="server" Width="100%"
            <telerik:RadTextBox ID="RadTextBox31" runat="server" Width="50%" Text="AAABBBCCCDDDEEEFFFGGGHHHIIIJJJKKKLLLMMMNNNOOO" /> 
        </telerik:RadPane> 
        <telerik:RadPane ID="RadPane2" runat="server" Width="100%"
            <telerik:RadTextBox ID="RadTextBox32" runat="server" Width="50%" ShowButton="true" Text="AAABBBCCCDDDEEEFFFGGGHHHIIIJJJKKKLLLMMMNNNOOO" /> 
        </telerik:RadPane> 
        <telerik:RadPane ID="RadPane3" runat="server" Width="100%"
            <telerik:RadDatePicker ID="RadDatePicker33" runat="server" Width="50%" /> 
        </telerik:RadPane> 
    </telerik:RadSplitter> 
     
    <br /><br /> 
     
    <telerik:RadTextBox ID="RadTextBox50" runat="server" Width="50%" Text="50%" /> 
     
    <script type="text/javascript"
     
    window.onresize = function() 
        $find("<%= RadTextBox50.ClientID %>").repaint(); 
     
    </script> 
     
    </form> 
    </body> 
    </html> 
     


    Sincerely yours,
    Dimo
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. Yuri
    Yuri avatar
    3 posts
    Member since:
    Jan 2008

    Posted 03 Feb 2009 Link to this post

    Hi Dimo,

    Thank you for your solutions. They both work. But they both are not suitable for our application.

    Our application uses forms with 100+ controls on a form (split into 5-10 tabs on a tabs control). We currently use your library for all the controls, including tabs, tab control, menu, toolbar, grid, and all the entry controls. And we already have big client-side performance problems with your controls, since you heavily use JavaScript with no options not to use it. Currently we have 1-2 second delay after page loads. This delay is the execution of JavaScript which your library generates to intialize controls on page.

    Any of your two solutions for solving "100% width" problem with RadTextBox makes existing delays even longer and introduces new delays. This is unacceptable to our customer. We are already working on minimizing the existing delays and do not have any tolerance for increasing them.

    So, the question about deadlines for fixing the "100% width" bug remains. When can we expect to have a build of Telerik controls with the bug fixed?
  4. Dimo
    Admin
    Dimo avatar
    8456 posts

    Posted 03 Feb 2009 Link to this post

    Hi Yuri,

    If you have a lot of textboxes on a single page, then it is recommended to use RadInputManager instead of RadInput. This yields a considerable performance improvement.

    http://www.telerik.com/help/aspnet-ajax/introduction_to_radinputmanager.html

    You can turn off textbox repainting by adding the following Javascript at the end of your pages:

    Telerik.Web.UI.RadInputControl.prototype.repaint = function()
    {
         // nothing here
    }

    We will add the ability to turn off repainting declaratively for a future version of RadInput. However, in this case you may observe another issue, related to Internet Explorer - if you enter a large string inside a textbox, it will expand when blurred. We will research for a way to avoid this as well.


    Sincerely yours,
    Dimo
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  5. Yuri
    Yuri avatar
    3 posts
    Member since:
    Jan 2008

    Posted 03 Feb 2009 Link to this post

    Hi Dimo,

    Yes, we are already moving to RadInputManager, thank you. It's a pity RadInputManager does not support comboboxes and date entries. :)

    As to RadTextBox bug in support of width and in support of width in CSS in particular - we are waiting for new releases of the controls.

    Best wishes
    Yuri
  6. Dimo
    Admin
    Dimo avatar
    8456 posts

    Posted 03 Feb 2009 Link to this post

    Hi Yuri,

    Actually RadInputManager supports date entries via its DateInputSetting:

    http://demos.telerik.com/aspnet-ajax/input/examples/radinputmanager/firstlook/defaultcs.aspx

    (Indeed, it does not support popup calendars)

    As for the comboboxes - we are currently implementing the ability for RadFormDecorator to style regular dropdowns, which naturally are lighter controls than RadComboBox.


    All the best,
    Dimo
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  7. Leon Aiossa
    Leon Aiossa avatar
    1 posts
    Member since:
    Aug 2009

    Posted 24 Feb 2011 Link to this post

    It works fine
    This is an old thread, but you must do this in a css class ...
    .txtBox {

     

     

     

     

    width: 100% !important;

     

     

    }




    And then use it in your control like this ...

    <td style="white-space: nowrap; width: 34%" align="center" valign="middle"><tk:RadTextBox runat="server" ID="txtSearchByEmployee" CssClass="txtBox" Skin="Hay" Width="100%" /></td>

     

     

     

     

     


    I think it's the !important part which is the key

Back to Top