Last Updated: 14 Dec 2013 09:23 by ADMIN
Created on: 07 Aug 2013 04:09
Category: Ajax
Type: Bug Report
radtextbox sum width with labelwidth property set is smaller
If we create a RadTextBox with procentage width property, and define  labelwidth property total width of generated span content is smaller then span width :       <telerik:RadTextBox   ID="RadTextBoxEditName" runat="server" Width="80%" Label="Наимен:"  LabelWidth="100px"                                                                   LabelCssClass="sfContactFormLabel">                                                               </telerik:RadTextBox>

and html generated:

<span id="ctl00_ContentPlaceHolder1_RadTextBoxEditName_wrapper" class="riSingle RadInput RadInput_Default" style="width:80%;"><label class="riLabel sfContactFormLabel" for="ctl00_ContentPlaceHolder1_RadTextBoxEditName" id="ctl00_ContentPlaceHolder1_RadTextBoxEditName_Label" style="width:100px;">Наимен:</label><span class="riContentWrapper" style="width:80%;"><input id="ctl00_ContentPlaceHolder1_RadTextBoxEditName" name="ctl00$ContentPlaceHolder1$RadTextBoxEditName" size="20" class="riTextBox riRead" type="text" value="" readonly=""></span><input id="ctl00_ContentPlaceHolder1_RadTextBoxEditName_ClientState" name="ctl00_ContentPlaceHolder1_RadTextBoxEditName_ClientState" type="hidden" autocomplete="off" value="{&quot;enabled&quot;:true,&quot;emptyMessage&quot;:&quot;&quot;,&quot;validationText&quot;:&quot;&quot;,&quot;valueAsString&quot;:&quot;&quot;,&quot;lastSetTextBoxValue&quot;:&quot;&quot;}"></span>

Why width css property equals within span wrapper and input 
1 comment
Posted on: 14 Dec 2013 09:23
This is not a bug, it’s rather a limitation in the current implementation. The text box metrics are calculated on the server. The problem comes from the fact that there is no way to convert percentage to pixel or pixel to percentage units on the server. That’s why, all RadTextBox components must be with the same units. This is however possible on the client, because we can get the computed styles of all elements. Here is an example:

<form id="form1" runat="server">
	<telerik:RadScriptManager runat="server" ID="rsm1"></telerik:RadScriptManager>

		function onLoad(sender, args) {
			var wrapperEl = sender.get_wrapperElement(),
				inputEl = sender.get_element(),
				labelEl = sender.get_wrapperElement().getElementsByTagName('label')[0],
				wrapperElWidth = parseInt($telerik.getComputedStyle(wrapperEl, "width", 0), 10),
				labelElWidth = parseInt($telerik.getComputedStyle(labelEl, "width", 0),10); = (wrapperElWidth - labelElWidth) + 'px';

	<telerik:RadTextBox runat="server" ID="rtb1" Skin="Silk" Label="This is textbox: " Width="80%"></telerik:RadTextBox>
	<telerik:RadTextBox runat="server" ID="RadTextBox1" Skin="Silk" Label="This is textbox: " Width="80%" LabelWidth="100px">
		<ClientEvents OnLoad="onLoad" />
OnLoad client-side event we attach the onLoad event handler in which we retrieve the corresponding html elements and their computed styles.
In your case, the easiest option would be to set label's width in percentage, but if this solution is not convenient you can use the programmatic approach mentioned above.