Width Issue with RadNumericTextBox

[Neeraj Singh]

I want to override default width 125px with css class.

CSS

---

DIV.f21 INPUT, DIV.f21 TEXTAREA{width: 210px !important;}

ASPX

---

<div class="f21">
<rad:RadNumericTextBox ID="numericControlRadNumericTextBox" runat="server" SelectionOnFocus="CaretToEnd" Type="Number" Label="Numeric Control">
    <NumberFormat AllowRounding="True" DecimalDigits="0" GroupSeparator="" />
</rad:RadNumericTextBox>
</div>

Rendered HTML

---

<SPAN class="radInput_WebBlue" id="ctl00_DefaultContent_feinTextBox_numericControlRadNumericTextBox_wrapper" style="WHITE-SPACE: nowrap"><INPUT class="radEnabledCss_WebBlue textAlignRight" id="ctl00_DefaultContent_feinTextBox_numericControlRadNumericTextBox_text" onblur="return numericControlOnBlur(this,'ctl00_DefaultContent_feinTextBox_numericControlErrorImage',false,'ctl00_DefaultContent_feinTextBox_numericControlHiddenField')" style="WIDTH: 125px" maxLength="9" value="" /><INPUT id="ctl00_DefaultContent_feinTextBox_numericControlRadNumericTextBox" style="BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; VISIBILITY: hidden; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: -18px 0px 0px; OVERFLOW: hidden; PADDING-TOP: 0px; HEIGHT: 1px; BORDER-RIGHT-WIDTH: 0px" value="" /><INPUT id="ctl00_DefaultContent_feinTextBox_numericControlRadNumericTextBox_Value" style="BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; VISIBILITY: hidden; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: -18px 0px 0px; OVERFLOW: hidden; PADDING-TOP: 0px; HEIGHT: 1px; BORDER-RIGHT-WIDTH: 0px" name="ctl00$DefaultContent$feinTextBox$numericControlRadNumericTextBox" value="" /><INPUT id="ctl00_DefaultContent_feinTextBox_numericControlRadNumericTextBox_ClientState" type="hidden" name="ctl00_DefaultContent_feinTextBox_numericControlRadNumericTextBox_ClientState" autocomplete="off" value="" /></SPAN>

Problem

---

Since RadNumericTextBox render as span with 4 INPUT tags (3 are hidden with 1px width). Due to the f21 class all input except ctl00_DefaultContent_feinTextBox_numericControlRadNumericTextBox_ClientState gets width of 210px whereas from developer perspective it should only be applied to NumericTextBox added.

Please suggest a solution to fix the issue.

Also why needs width of 1px whereas ctl00_DefaultContent_feinTextBox_numericControlRadNumericTextBox_Value & ctl00_DefaultContent_feinTextBox_numericControlRadNumericTextBoxctl00_DefaultContent_feinTextBox_numericControlRadNumericTextBox_ClientState  dosn't have it?

Thanks,
Neeraj

[Dimo]

Hello Neeraj,

If you want to use a CSS class to set width to RadNumericTextBox, then your custom CSS rule depends on your scenario:


1)  If you have set the Label="....." property, or have set ShowSpinButtons="true" or ShowButton="true" then the CSS rule should be:

div.f21  div.radInput_WebBlue ,
div.f21  div.radInput_WebBlue  table
{
    width: 210px  !important ;
}



2)  If you have neither a label, nor buttons, then the CSS rule should be:

div.f21  .radEnabledCss_WebBlue ,
div.f21  .radEmptyMessageCss_WebBlue ,
div.f21  .radHoverCss_WebBlue ,
div.f21  .radFocusedCss_WebBlue ,
div.f21  .radNegativeCss_WebBlue ,
div.f21  .radDisabledCss_WebBlue ,
div.f21  .radInvalidCss_WebBlue
{
    width: 210px  !important ;
}


3)  If you are using RadNumericTextBox in both scenarios, you can combine the two CSS rules like this:

div.f21  div.radInput_WebBlue ,
div.f21  div.radInput_WebBlue  table,
div.f21  span.radInput_WebBlue  .radEnabledCss_WebBlue ,
div.f21  span.radInput_WebBlue  .radEmptyMessageCss_WebBlue ,
div.f21  span.radInput_WebBlue  .radHoverCss_WebBlue ,
div.f21  span.radInput_WebBlue  .radFocusedCss_WebBlue ,
div.f21  span.radInput_WebBlue  .radNegativeCss_WebBlue ,
div.f21  span.radInput_WebBlue  .radDisabledCss_WebBlue ,
div.f21  span.radInput_WebBlue  .radInvalidCss_WebBlue
{
    width: 210px  !important ;
}


By the way, the HTML output that you have pasted, does not correspond to the RadNumericTextBox declaration - when you have set the Label="" property, the control renders inside a <div>, not <span>.


As for your questions:

1) "Due to the f21 class all input except "..._ClientState" gets width of 210px whereas from developer perspective it should only be applied to NumericTextBox added."

---> Well, since the CSS rule says "set 210px width to ALL input elements inside div.f21, this is exactly what happens". The 3 hidden input elements are needed by the control to store temporary values and values in a different format than the one that is displayed.


2) "Also why needs width of 1px whereas "..._Value" & "..._ClientState" doesn't have it?"

---> Actually the "..._Value" textbox has a 1px width as well. The "..._ClientState" input element does not have a width, because it is an <input type="hidden" /> element and is not rendered by the browser anyway. The other hidden textboxes are rendered by the browser and need to be hidden with CSS styles. On the other hand, we cannot set them a display:none style, because the MS AJAX Toolkit's validation callout extender will not work with RadNumericTextBox. That is why we are hiding them by making them small.


I hope this throws some light on the matter. Let us know if you need further advice.


All the best,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center