issue: align right + ShowSpinButtons enabled => value is invisible

4 posts, 2 answers
  1. Dev
    Dev avatar
    2 posts
    Member since:
    Dec 2017

    Posted 08 Jan Link to this post

    Hi,

    i have an issue with NumericTextBox.

    when the NumericTextBox has spinbuttons enabled, then its width are not taking in account and overlays the value and during editing the cancel-button as well. i am using Microsoft Windows 10 (1809) and its Microsoft Edge.

    here the code-snip:

    <telerik:RadNumericTextBox ID="RadNumericTextBox1"
        runat="server"
        MinValue="0" MaxValue="100"
        DbValue='<%# Eval("test") %>'
        ShowSpinButtons="False"
        NumberFormat-AllowRounding="False"
        ReadOnlyStyle-HorizontalAlign="Right"
        NegativeStyle-HorizontalAlign="Right"
        InvalidStyle-HorizontalAlign="Right"
        HoveredStyle-HorizontalAlign="Right"
        FocusedStyle-HorizontalAlign="Right"
        EnabledStyle-HorizontalAlign="Right"
        EmptyMessageStyle-HorizontalAlign="Right"
        DisabledStyle-HorizontalAlign="Right"
        />

    Same  behaviour, when using CcsClass style to align the value to the right.

     

     

  2.
  3. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    4931 posts

    Posted 10 Jan Link to this post

    Hello,

    Here is an example that can change the behavior of the spin buttons by floating the two elements instead of overlaying them. I also highlighted the changes I made to the markup so I can run it and create the screenshot from the results (which is attached at the end of this post). Depending on the desired layout and width, you may want to tweak the percentages a little.

    <style>
        .RadInput.floatedButtons .riTextBox,
        .RadInput.floatedButtons .riSelect {
            float: left;
        }
     
        .RadInput.floatedButtons .riSelect {
            width: 32px;
        }
     
        .RadInput.floatedButtons .riTextBox {
            padding-right: 42px;
        }
    </style>

    <telerik:RadNumericTextBox ID="RadNumericTextBox1"
        runat="server"
        MinValue="0" MaxValue="100"
        Value="12.34"
        WrapperCssClass="floatedButtons"
        ShowSpinButtons="true"
        NumberFormat-AllowRounding="False"
        ReadOnlyStyle-HorizontalAlign="Right"
        NegativeStyle-HorizontalAlign="Right"
        InvalidStyle-HorizontalAlign="Right"
        HoveredStyle-HorizontalAlign="Right"
        FocusedStyle-HorizontalAlign="Right"
        EnabledStyle-HorizontalAlign="Right"
        EmptyMessageStyle-HorizontalAlign="Right"
        DisabledStyle-HorizontalAlign="Right" />


    Regards,
    Marin Bratanov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    4931 posts

    Posted 10 Jan Link to this post

    Just a quick follow up. I made this information into a KB article (https://www.telerik.com/support/kb/aspnet-ajax/numerictextbox/details/value-hidden-behind-spin-buttons-with-right-align) that also contains a simpler solution as some of the CSS rules above are unnecessary and were leftovers from my tests. The following should suffice
    <style>
        .RadInput.floatedButtons .riTextBox {
            padding-right: 42px;
        }
    </style>
    Copy Code
    <telerik:RadNumericTextBox ID="RadNumericTextBox1"
        runat="server"
        MinValue="0" MaxValue="100"
        Value="12.34"
        WrapperCssClass="floatedButtons"
        ShowSpinButtons="true"
        NumberFormat-AllowRounding="False"
        ReadOnlyStyle-HorizontalAlign="Right"
        NegativeStyle-HorizontalAlign="Right"
        InvalidStyle-HorizontalAlign="Right"
        HoveredStyle-HorizontalAlign="Right"
        FocusedStyle-HorizontalAlign="Right"
        EnabledStyle-HorizontalAlign="Right"
        EmptyMessageStyle-HorizontalAlign="Right"
        DisabledStyle-HorizontalAlign="Right" />
  7. Dev
    Dev avatar
    2 posts
    Member since:
    Dec 2017

    Posted 10 Jan in reply to Marin Bratanov Link to this post

    thank you for the example, it works.
  8.
Back to Top