RadNumericaTextBox Spinbuttons right aligned

2 posts, 1 answers
  1. Mike Dugan
    Mike Dugan avatar
    8 posts
    Member since:
    Aug 2006

    Posted 14 Oct 2008 Link to this post

    If I put a RadNumericTextBox, using the Web20 skin, in a table cell that is right aligned, the spin buttons do seem to render properly in IE:

     <table> 
            <tr> 
              <td align="right"
                <telerik:RadNumericTextBox ID="RadNumericTextBox1" Runat="server"  
            Culture="English (United States)" ShowSpinButtons="True" Skin="Web20"  
            Width="125px"
        </telerik:RadNumericTextBox> 
              </td> 
            </tr> 
          </table> 


    Any suggestion for getting the spinbuttons to display properly?


  2. Answer
    Serrin
    Serrin avatar
    286 posts
    Member since:
    Sep 2008

    Posted 15 Oct 2008 Link to this post

    Hey Mike,

    Screwiest thing, if you look at the code generated, the spin buttons are actually little spans that have the words "Span Up" and "Span Down" in them (did a screen capture and you can see pieces of those words over the buttons).  To get around that, you need to override some of the spin css as follows:

    <style type="text/css">  
     
    .radInput_Web20 a.spinbutton  
    {  
        width:13px;  
        height:7px;   
        line-height:7px;  
        margin:0 1px;  
        text-align:left;  
    }  
     
    .radInput_Web20 a.up  
    {  
        background-position:3px -40px;  
        text-align:left;  
    }  
     
    .radInput_Web20 a.down  
    {  
        background-position:3px -75px;  
        margin-top:2px;  
        text-align:left;  
    }  
    </style> 
     
            <table>    
            <tr>    
              <td align="right">    
                <telerik:RadNumericTextBox ID="RadNumericTextBox2" Runat="server" Culture="English (United States)" 
                 ShowSpinButtons="True" Skin="Web20" Width="125px">  
        </telerik:RadNumericTextBox>
              </td>    
            </tr>    
          </table>   

    By forcing text-align:left, the text for the button span goes back to its previous hidden state. :)
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top