RadNumericTextbox Width Problem in Chrome

5 posts, 1 answers
  1. Jeff Gorman
    Jeff Gorman avatar
    4 posts
    Member since:
    May 2010

    Posted 11 May 2011 Link to this post

    The adjusted width of the RadNumericTextBox will not render correctly in Chrome.  I've tried everything I can think of with no luck.  I want to adjust the width of the control to approximately 50-60px. 

    The problem appears to be the Spin Buttons.  If I set ShowSpinButtons="False", then set the control's Width="50px" it resizes just fine.

    ASPX Page
    <style>
             
            .RadInput_Default table
            {
                width: 50px  !important ;
            }
    </style>
     
    <div class="qty" style="width:50px;">
            <telerik:RadNumericTextBox ID="txtQty" runat="server"
             MinValue="1" Value="1" ShowSpinButtons="True" NumberFormat-DecimalDigits="0"></telerik:RadNumericTextBox>
             <div style="clear:both;"></div>
    </div>

    RENDERED HTML
    <div class="qty" style="width:50px;">
     
            <!-- 2010.1.415.40 --><div id="txtQty_wrapper" class="RadInput RadInput_Default" style="width:125px;">
     
        <table cellpadding="0" cellspacing="0" class="riTable" style="border-width:0;border-collapse:collapse;width:100%;">
     
            <tr>
     
                <td class="riCell" style="width:100%;white-space:nowrap;"><input type="text" value="1" id="txtQty_text" name="txtQty_text" class="riTextBox riEnabled" style="width:100%;" /><input style="visibility:hidden;float:right;margin:-18px 0 0 -1px;width:1px;height:1px;overflow:hidden;border:0;padding:0;" id="txtQty" class="rdfd_" value="1" type="text" /><input style="visibility:hidden;float:right;margin:-18px 0 0 -1px;width:1px;height:1px;overflow:hidden;border:0;padding:0;" id="txtQty_Value" class="rdfd_" name="txtQty" value="1" type="text" /></td><td class="riSpin"><a class="riUp" href="javascript:void(0)" id="txtQty_SpinUpButton"><span>Spin Up</span></a><a class="riDown" href="javascript:void(0)" id="txtQty_SpinDownButton"><span>Spin Down</span></a></td>
     
            </tr>
     
        </table><input id="txtQty_ClientState" name="txtQty_ClientState" type="hidden" />
     
    </div>
     
             <div style="clear:both;"></div>
     
        </div>


  2. Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 12 May 2011 Link to this post

    Hello Jeff,

    As you may have noticed that spin buttons take up 15px of the controls total width. So the input area would only be around 35px wide with the spin buttons. So if you want it the input area to be 50px wide, you would need to set the total width of the control to 65px. Also, as you may have noticed in the rendered HTML that it sets the total width to 125px as a default, you need to set the Width on the RadNumericTextBox control itself and not through css on the table element.

    I hope that helps.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jeff Gorman
    Jeff Gorman avatar
    4 posts
    Member since:
    May 2010

    Posted 13 May 2011 Link to this post

    The width attribute is useless in Chrome when the spin buttons are active.  It doesn't matter what you set the width to.  The entire width will always be 164px wide.  It resizes fine in IE.
  5. Answer
    Martin
    Admin
    Martin avatar
    811 posts

    Posted 16 May 2011 Link to this post

    Hello Jeff Gorman,

    The HTML output of a RadInput control with a label or buttons is different than the HTML output of a RadInput control without them. This help article provides some more details on the matter.

    In your case I would suggest that you add the following CSS selector:

    <style>
         .RadInput_Default table,
         .RadInput_Default input.riTextBox
         {
             width: 50px !important;
         }
    </style>

    I hope this helps.

    Regards,
    Martin
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  6. Shailendra
    Shailendra avatar
    22 posts
    Member since:
    Jul 2008

    Posted 20 Jun 2011 Link to this post

    The proposed solution did not work for me. This is what worked for me.

    .radEnabledCss_Default,
    .radEmptyMessageCss_Default,
    .radHoverCss_Default,
    .radFocusedCss_Default,
    .radReadOnlyCss_Default,
    .radDisabledCss_Default,
    .radNegativeCss_Default,
    .radInvalidCss_Default,
    .radInput_Default table,
    .radInput_Default input.riTextBox
    {
    width: 50px !important;
    }
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017