RadNumericTextBox overlaps its label

5 posts, 0 answers
  1. Andrew
    Andrew avatar
    34 posts
    Member since:
    Dec 2010

    Posted 07 Mar 2012 Link to this post

    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")?
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 08 Mar 2012 Link to this post

    Hello,

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

    -Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Andrew
    Andrew avatar
    34 posts
    Member since:
    Dec 2010

    Posted 08 Mar 2012 Link to this post

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

  5. Megan
    Megan avatar
    4 posts
    Member since:
    Nov 2012

    Posted 15 Apr 2013 Link to this post

    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?
  6. Megan
    Megan avatar
    4 posts
    Member since:
    Nov 2012

    Posted 15 Apr 2013 Link to this post

    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. 
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017