This is a migrated thread and some comments may be shown as answers.

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

3 Answers 10 Views
NumericTextBox
This is a migrated thread and some comments may be shown as answers.
Dev
Top achievements
Rank 1
Dev asked on 08 Jan 2019, 11:30 AM

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.

 

 

3 Answers, 1 is accepted

Sort by
0
Accepted
Marin Bratanov
Telerik team
answered on 10 Jan 2019, 03:07 PM
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.
0
Accepted
Marin Bratanov
Telerik team
answered on 10 Jan 2019, 03:29 PM
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" />
0
Dev
Top achievements
Rank 1
answered on 10 Jan 2019, 03:30 PM
thank you for the example, it works.
Tags
NumericTextBox
Asked by
Dev
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Dev
Top achievements
Rank 1
Share this question
or