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

[Dev]

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.

 

 

[Marin Bratanov]

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

[Marin Bratanov]

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" />

[Dev]

thank you for the example, it works.