This is a migrated thread and some comments may be shown as answers.

RadTextBox: Width 100 percent does not work correctly

6 Answers 905 Views
Input
This is a migrated thread and some comments may be shown as answers.
Yuri
Top achievements
Rank 1
Yuri asked on 02 Feb 2009, 12:12 PM
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?

6 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 02 Feb 2009, 04:28 PM
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.
0
Yuri
Top achievements
Rank 1
answered on 03 Feb 2009, 09:01 AM
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?
0
Dimo
Telerik team
answered on 03 Feb 2009, 09:33 AM
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.
0
Yuri
Top achievements
Rank 1
answered on 03 Feb 2009, 11:51 AM
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
0
Dimo
Telerik team
answered on 03 Feb 2009, 03:52 PM
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.
0
Leon Aiossa
Top achievements
Rank 1
answered on 24 Feb 2011, 08:31 PM

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

Tags
Input
Asked by
Yuri
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Yuri
Top achievements
Rank 1
Leon Aiossa
Top achievements
Rank 1
Share this question
or