RadTextBox Setting width programmatically

3 posts, 0 answers
  1. Jonathan Zee
    Jonathan Zee avatar
    22 posts
    Member since:
    Mar 2009

    Posted 06 Jun 2013 Link to this post

    Hi guys,

    I have just upgraded my telerik controls and discovered that all radinputs ( radtextbox, datepicker etc..) width have gone awry. Everything is now set to 100% width even though it was specified in the inline code to be of a certain pixel.

    <telerik:RadTextBox ID="tbxSomething" runat="server" Skin="Default" width="250px"></telerik:RadTextBox>

    When i go thru my firebug, it shows the default style as:

    html body .riSingle .riTextBox[type="text"] {

    even though the parent span is taking the specifed width into consideration but it's still rendering the control as 100% width due to the above css style.

    <span id="tbxSomething_wrapper" class="riSingle RadInput RadInput_Default" style="width: 250px;">
      /*input control here*/

    I can't actually override html body .riSingle .riTextBox[type="text"] style as it seems that every other "textbox like" input is using that same style..including datepickers.

    Is there way where I can be able to set the width of specific textboxes without the use of CSS as these controls are generated dynamically from xml --> xslt --> aspx and I would like the users to be able to define the width of textboxes based on the type of input.

    Please advise?


  2. Vasil
    Vasil avatar
    1604 posts

    Posted 11 Jun 2013 Link to this post


    When set Width to the RadTextBox, this width to the whole control, not only the Input element. The Control can have several parts, Label, Input and Button (+ spinButtons)
    So when you set 250px, it applies to the wrapper. The Input element inside has width 100%, but this width will not go pass the width of its parent.
    In case when you don't have label or button, the 100% of 250px, will be 250px. So the input will be exact as its parent.

    If the Input is bigger than it's parent, then most probably you have set some additional styles, that should not be applied, like Relative or Absolute Position. Check for such CSS and remove it to avoid any problems.

    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 the blog feed now.
  3. Jonathan Zee
    Jonathan Zee avatar
    22 posts
    Member since:
    Mar 2009

    Posted 11 Jun 2013 Link to this post

    Hi Vasil,

    Thanks for that.
Back to Top