RadNumericTextBox overlaps its label

[Andrew]

I have a RadNumericTextBox defined as so:

<telerik:RadNumericTextBox
    runat="server"
    ID="_tbTickerSpeed"
    ShowSpinButtons="True"
    Label="Ticker Speed"
 >
    <NumberFormat DecimalDigits='0' />
    <EnabledStyle HorizontalAlign='Right'  />
</telerik:RadNumericTextBox>

When I was using version 2011.2.712.40, it displayed correctly.

I have upgraded to version 2012.1.215.40, and now the text box is much wider, and overlapping its label. (See the two attachments for the correct and incorrect display).


The generated HTML for the correct display:

<div id="ctl00_Main__playerLocalSettingsControl__tbTickerSpeed_wrapper" class="RadInput RadInput_Default" style="width: 125px; display: inline-block; ">
            <table cellpadding="0" cellspacing="0" class="riTable" style="border-width:0;border-collapse:collapse;width:100%;">
                <tbody><tr>
                    <td><label class="riLabel" for="ctl00_Main__playerLocalSettingsControl__tbTickerSpeed_text" id="ctl00_Main__playerLocalSettingsControl__tbTickerSpeed_Label">Ticker Speed</label></td><td class="riCell" style="width:100%;white-space:normal;"><input type="text" id="ctl00_Main__playerLocalSettingsControl__tbTickerSpeed_text" name="ctl00_Main__playerLocalSettingsControl__tbTickerSpeed_text" class="riTextBox riEnabled" style="width: 100%; text-align: right; " maxlength="524288"><input style="visibility:hidden;float:right;margin:-18px 0 0 -1px;width:1px;height:1px;overflow:hidden;border:0;padding:0;" id="ctl00_Main__playerLocalSettingsControl__tbTickerSpeed" class="rdfd_" value="" type="text" title=""><input style="visibility:hidden;float:right;margin:-18px 0 0 -1px;width:1px;height:1px;overflow:hidden;border:0;padding:0;" id="ctl00_Main__playerLocalSettingsControl__tbTickerSpeed_Value" class="rdfd_" name="ctl00$Main$_playerLocalSettingsControl$_tbTickerSpeed" value="" type="text" title=""></td><td class="riSpin"><a class="riUp" href="javascript:void(0)" id="ctl00_Main__playerLocalSettingsControl__tbTickerSpeed_SpinUpButton"><span>Spin Up</span></a><a class="riDown" href="javascript:void(0)" id="ctl00_Main__playerLocalSettingsControl__tbTickerSpeed_SpinDownButton"><span>Spin Down</span></a></td>
                </tr>
            </tbody></table><input id="ctl00_Main__playerLocalSettingsControl__tbTickerSpeed_ClientState" name="ctl00_Main__playerLocalSettingsControl__tbTickerSpeed_ClientState" type="hidden" autocomplete="off">
        </div>

And the HTML for the incorrect display:

<span id="ctl00_Main__playerLocalSettingsControl__tbTickerSpeed_wrapper" class="riSingle  riContSpinButtons RadInput RadInput_Windows7" style="width:160px;">
   <label class="riLabel" for="ctl00_Main__playerLocalSettingsControl__tbTickerSpeed" id="ctl00_Main__playerLocalSettingsControl__tbTickerSpeed_Label" style="width:64px;">Ticker Speed
    </label>
    <span class="riContentWrapper" style="width:96px;">
        <span class="riDisplay" id="ctl00_Main__playerLocalSettingsControl__tbTickerSpeed_display" style="color: rgb(0, 0, 0); display: inline; font-family: 'segoe ui', arial, sans-serif; font-size: 12px; line-height: normal; text-align: right; padding-left: 5px; padding-right: 5px; border-left-width: 1px; border-right-width: 20px; ">
            10
        </span>
    <input id="ctl00_Main__playerLocalSettingsControl__tbTickerSpeed" name="ctl00$Main$_playerLocalSettingsControl$_tbTickerSpeed" type="text" class="riTextBox riEnabled" style="text-align: right; color: transparent; "><a class="riUp" href="javascript:void(0)" id="ctl00_Main__playerLocalSettingsControl__tbTickerSpeed_SpinUpButton"><span>Spin Up</span></a><a class="riDown" href="javascript:void(0)" id="ctl00_Main__playerLocalSettingsControl__tbTickerSpeed_SpinDownButton"><span>Spin Down</span></a></span>
    <input id="ctl00_Main__playerLocalSettingsControl__tbTickerSpeed_ClientState" name="ctl00_Main__playerLocalSettingsControl__tbTickerSpeed_ClientState" type="hidden" autocomplete="off" value="{"enabled":true,"emptyMessage":"","minValue":-70368744177664,"maxValue":70368744177664}">
</span>

What do I need to do to get this to display as it was before (ie as it displays in "tickerspeed_correct.png")?

[Shinu]

Hello,

Try the following CSS.
CSS:

.RadInput_Default .riLabel
{
    display: inline !important;
    padding-right: 5px !important;
}

-Shinu.

[Andrew]

The CSS selector wasn't quite correct, because I'm using the Windows7 theme rather than the default theme.

Once I used a broader selector, the solution works:

.radInput .riLabel
{
    display: inline !important;
    margin-right: 5px !important;
}

[Megan]

I am having the exact same problem after upgrading to the recent Telerik controls!  I am a little new to this, so where would I place this CSS code in my app?

[Megan]

Sorry for my last post, I am a little slow today!  I pasted the code in my style.css page and it helped....
I had to tweak it a little to get it to look the way I wanted but thanks for the info!  I was really stumped and annoyed for awhile before I found this post!
I also had to tweak teh riLabel in the css stylesheet for my RadTextBox label to display correctly as well.