1. Home
  2. Forum
  3. Blazor
  4. SfNumericTextBox Spin button order

SfNumericTextBox Spin button order

Hi

I have the following requirement:

When using a NumberTextbox my client wants the up-arrow to be on the left side and the down-arrow on the right side. An alternative would be to have them above each other.



Is this possible to implement?

6 Replies 1 reply marked as answer
JM Jeyanth Muthu Pratheeban Sankara Subramanian Syncfusion Team March 24, 2021 11:07 AM UTC

Hello Simon, 

Thanks for contacting Syncfusion support. 

We have checked your query of interchanging the spin buttons in Numeric Textbox. We can achieve this requirement by customizing the CSS styles. For this, we suggest you to configure CssClass property which adds the provided class to the wrapper of the Numeric Textbox. With the help of the added class, we can customize the CSS styles.

Please find the sample below for your reference. 

Code Snippet     :

 
<SfNumericTextBox TValue="double?" CssClass="e-custom-spin"></SfNumericTextBox> 


<style> 
    .e-custom-spin .e-input-group .e-input-group-icon + .e-custom-spin .e-input-group-icon, 
    .e-custom-spin.e-input-group.e-control-wrapper .e-input-group-icon + .e-input-group-icon { 
        /*To customize the spin up button in the position of spin down button since the order is changed*/ 
        border-left: 1px solid #ced4da; 
        border-radius: 0px; 
    } 
    .e-custom-spin .e-input-group-icon.e-spin-down { 
        /*To change the order of flex*/ 
        order: 1; 
        /*To apply border radius to match with input container since the order is changed*/ 
        border-bottom-right-radius: 3px; 
        border-top-right-radius: 3px; 
    } 
</style> 


Screenshot        : 

 

Kindly integrate the provided solution in your application and get back to us if you need any further assistance on this. 

Regards, 
Jeyanth. 


Marked as answer
SB Simon Balling March 27, 2021 07:42 AM UTC

Thanks Jeyanth thats exactly what i wanted

JM Jeyanth Muthu Pratheeban Sankara Subramanian Syncfusion Team March 29, 2021 06:39 AM UTC

Hi Simon, 
 
We are glad to hear that your requirement has been achieved. Please let us know if need any further assistance on this. 
 
Regards, 
Jeyanth. 


DM Dietfrid Mali March 8, 2022 06:08 PM UTC

Is it possible to do the alternative layout as shown by the op?


PM Ponmani Murugaiyan Syncfusion Team March 9, 2022 04:00 PM UTC

Hi Dietfrid, 

Currently we are checking your reported query. We will update further details in 2 business days (March 11, 2022). 

Regards, 
Ponmani M 


PM Ponmani Murugaiyan Syncfusion Team March 14, 2022 02:53 AM UTC

Hi Dietfrid, 

We have prepared sample for your requirement with the mentioned alignment by overriding the styles. 

<SfNumericTextBox Width="300px" ID="Numeric" TValue="int?" CssClass="e-custom"> 
    <NumericTextBoxEvents TValue="int?" Created="onCreate"></NumericTextBoxEvents> 
</SfNumericTextBox> 
 
@code{ 
    [Inject] 
    protected IJSRuntime JsRuntime { get; set; } 
 
    public async Task onCreate() 
    { 
        await JsRuntime.InvokeVoidAsync("create", "Numeric"); 
    } 
} 
 
<style> 
 
    .e-input-group-icon { 
        display:none !important; 
    } 
    span.e-spin-up:before { 
        content: "\e721"; 
        font-family: e-icons; 
        font-size: 10px; 
    } 
 
    span.e-spin-down:before { 
        content: "\e744"; 
        font-family: e-icons; 
        font-size: 10px; 
    } 
 
    .e-spin-up { 
        display: grid; 
        height: 0px; 
        margin-top: 3px; 
    } 
 
    .e-spin-down { 
        display: grid; 
        width: 0px; 
        margin: auto; 
        margin-bottom: 5px; 
    } 
 
    .e-spin-up:hover { 
        background: none; 
    } 
</style> 

window.create = (id) => { 
    // Create the span element for insert phone icon  
    var spindown = document.createElement("span"); 
    // Add the phone icon class to the span element  
    spindown.setAttribute("class", "e-spin-down"); 
    spindown.addEventListener("mousedown", (e) => { 
        
    }) 
    var spinup = document.createElement("span"); 
    // Add the phone icon class to the span element  
    spinup.setAttribute("class", "e-spin-up"); 
    spinup.addEventListener("mousedown", (e) => { 
         
    }) 
    // append the span element after the input wrapper  
    document.getElementsByClassName('e-control-container')[0].insertAdjacentElement('beforeend', spindown); 
    document.getElementsByClassName('e-control-container')[0].insertAdjacentElement('beforeend', spinup); 
}; 

 

Regards, 
Ponmani M 


Loader.
Up arrow icon