RadNumericTextbox Width Problem in Chrome

[Jeff Gorman]

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>

[Cori]

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.

[Jeff Gorman]

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.

[Martin]

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

[Shailendra]

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;
}