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

How to hide spin buttons?

4 Answers 1082 Views
NumericTextBox
This is a migrated thread and some comments may be shown as answers.
Juan Angel
Top achievements
Rank 1
Veteran
Juan Angel asked on 28 Oct 2020, 05:21 PM
Simply, how to hide spin buttons?

4 Answers, 1 is accepted

Sort by
0
Accepted
Marin Bratanov
Telerik team
answered on 28 Oct 2020, 06:08 PM

Hello Juan,

You can set the Arrows paremeter to false. You can see it in action in this demo: https://demos.telerik.com/blazor-ui/numerictextbox/overview

 

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Juan Angel
Top achievements
Rank 1
Veteran
answered on 29 Oct 2020, 06:46 AM
Thanks a lot !!!!
0
Juan Angel
Top achievements
Rank 1
Veteran
answered on 29 Oct 2020, 06:49 AM
Any solution for set Arrows="false" by default in whole project ?
0
Accepted
Marin Bratanov
Telerik team
answered on 29 Oct 2020, 08:32 AM

Hi Juan,

One way would be to wrap the telerik component in your own component and set that property there. That would mean you have to take care of bubbling events, handling validation, forms, and edit contexts, and generic typing. All of these are things we've already done for you in our component(s).

So, another approach could be to use CSS to hide the arrows (it is possible that screen readers might still announce them though).

<style>
    .k-numerictextbox .k-select {
        display: none;
    }
</style>

<TelerikNumericTextBox @bind-Value="@someField" />

@code{
    int someField { get; set; }
}

 

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Doug
Top achievements
Rank 1
commented on 02 Nov 2022, 01:14 PM

I just came across this post and I'm using Telerik Blazor 3.6.1 and adding this CSS worked for me.  I only post this to potentially help others.  I first attempted the EditorTemplate (which was a lot of work for my grid)

 

.k-numerictextbox .k-spinner-increase {
    display: none;
}
.k-numerictextbox .k-spinner-decrease {
    display: none;
}

Tags
NumericTextBox
Asked by
Juan Angel
Top achievements
Rank 1
Veteran
Answers by
Marin Bratanov
Telerik team
Juan Angel
Top achievements
Rank 1
Veteran
Share this question
or