RadTextBox width not sticking

11 posts, 0 answers
  1. Clarence Klopfstein
    Clarence Klopfstein avatar
    13 posts
    Member since:
    Oct 2008

    Posted 21 Jan 2009 Link to this post

    I have the following Control:
    <telerik:RadTextBox ID="txtSoldTo" runat="server" EmptyMessage="Enter Sold To Person" CssClass="txtSoldTo">
        </telerik:RadTextBox>

    Then I have the following CSS:
    .txtSoldTo
    {
        position: relative;
        top: -155px;
        left: 250px;
        float: left;
        width: 100px;
    }

    The width is not working.  How do I set the width via CSS?  I notice when I look at the markup on the served page that I see the 'size' as 20.







  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 21 Jan 2009 Link to this post

    Hi Clarence,

    Due to the RadTextBox rendering, behavior and features, the ability to set width with external CSS is limited. Please set it declaratively in the control server tag (you can use ASP.NET themes for this as well).

    Sincerely yours,
    Dimo
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Clarence Klopfstein
    Clarence Klopfstein avatar
    13 posts
    Member since:
    Oct 2008

    Posted 21 Jan 2009 Link to this post

    Then I highly recommend taking the time to fix this issue.  When you are trying to develop skinnable things by CSS (which web folks certainly understand) then CSS needs to be able to set basic settings like... width.
  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 21 Jan 2009 Link to this post

    Hello Clarence,

    We will implement the ability to set width to the textbox with CSS for some of the next versions of the control. One additional property will need to be set in order to make this work.

    Sincerely yours,
    Dimo
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 17 Apr 2009 Link to this post

    or as I just discovered do it as below....

    .textbox

     

    {width:300px ! important;}

    A nice workaround for the time being,  when they've fixed it just remove the ! important....

    Cheers,

    Jon

     

  7. Steve
    Steve avatar
    3 posts
    Member since:
    Nov 2012

    Posted 05 Nov 2012 Link to this post

    We have encountered a similar problem in IE 7 (working in IE 7 Standards Mode), where the set width of the text box is not working, even when the width is set in the RadTextBox tag. The width of the text box is set to 300px, but in IE 7 standards mode the text box is tiny and not respecting the width (see attached screenshot).

     <telerik:RadTextBox Width="300px" ....    produces:

     <span class="riSingle RadInput RadInput_Vista" id="tbTestGroupName_wrapper" style="width: 300px;">

    <input name="rdCreateNewTestGroup$C$tbTestGroupName" tabIndex="301" class="riTextBox riEnabled rfdDecorated" id="tbTestGroupName" style="width: 100%;" type="text" size="20" _events="[object Object]" control="[object Object]" RadInputValidationValue=""/>            


    So the span sets width to 300px, and the input within the span sets its width to 100%, which would make it stretch to 300px, but not in IE 7 standards mode. 

    We can't override the input's width:100% style because it's inline, and in-line styles can't be overridden from a class in the .css file in IE 7.

    The application we're developing is using the following doctype:

    DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"


    Any help you can give would be much appreciated as we're on a tight deadline.  =(

  8. Sonia
    Sonia avatar
    90 posts
    Member since:
    Mar 2012

    Posted 17 Oct 2013 Link to this post

    Hi,
    I am experimenting the same problem as Steve in IE9.
    Althought i change RadTextbox width it is not affecting the size of the input but the span containing that.
  9. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 17 Oct 2013 Link to this post

    Hi Sonia,

    RadTextBox is rendered as a combination of input control inside a span element. So if you are setting Width="400px" for the RadTextBox, when the control is rendered on the screen the span element will have a width of 400px and input width will be 100% (Means 100% of the width of span which will be equal to 400px).

    Thanks,
    Shinu.
  10. Sonia
    Sonia avatar
    90 posts
    Member since:
    Mar 2012

    Posted 18 Oct 2013 Link to this post

    Hi Shinu,
    this asp.net code
    <telerik:RadTextBox ID="Goal_Weight" runat="server" Width="50px"></telerik:RadTextBox>

    is translated into
    <span class="riSingle RadInput RadInput_Office2010Silver" id="ctl00_MainContent_RadWindow_AddGoal_C_Goal_Weight_wrapper" style="width: 50px;">
     
    <input name="ctl00$MainContent$RadWindow_AddGoal$C$Goal_Weight" tabIndex="0" class="riTextBox riEnabled" id="ctl00_MainContent_RadWindow_AddGoal_C_Goal_Weight" type="text" size="20" value="" />
     
    </span>

    as you can see input size is 20 and the consequence is that input size is much bigger than span width.
    Any idea on how to manage that input text is rendered with the desired size indicated in the radtextbox?
    thank you,
    Sonia.
  11. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 18 Oct 2013 Link to this post

    Hi Sonia,

    The size attribute specifies the width of an <input> element, in characters and the default value is 20 which you are getting in the rendered html. The size attribute is not a precise method of sizing - it refers to the number of characters the field will be able to display at once. The css style "width" will override the size attribute in browsers that support CSS and make the field the correct width, and for those that don't, it will fall back to the specified number of characters.

    If you examine the CSS of the <input> carefully you can find the following style which indicates that the width of input will be always 100% of the width of span (means input will have the same width as that of the span).
    html body .riSingle .riTextBox[type="text"]
    {
        width: 100%;
    }

    Hope this helps,
    Shinu.
  12. Sonia
    Sonia avatar
    90 posts
    Member since:
    Mar 2012

    Posted 23 Oct 2013 Link to this post

    Hi Shinu,

    In my opinion this behaviour should be achieved by setting width on the RadTextBox. In other case, this property has no sense or it is incomplete.

    Anyway i have solved it by setting the css you proposed as important.
    html body .riSingle .riTextBox[type="text"]
    {

        width: 100% !important;

    }
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017