Feedback wanted on NumericField, editor 'Spinner'

[netwavebe]

While working on NumericField, I noticed the 'spinner' editor has some issues. It's based on jQuery's spinner().

Layout of this field is not in line with the other fields (double border and different width):

(NumericField01 is the default editor, NumericField05 is the spinner editor).

It also has responsive issues:

I would like to change it to only use Bootstrap components, maybe something like this:

This would solve both the styling & responsive issues.

What's the group's take on this? Should I go and implement this?

[Skrypt]

Without looking at the code it should be using a btn-group.

[netwavebe]

Html looks good to me:

https://github.com/OrchardCMS/OrchardCore/blob/dev/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/NumericField-Spinner.Edit.cshtml#L17

It"s the jQuery plugin that breaks things by applying extra classes to the input-element.

[Skrypt]

input-goup instead of btn-group yep it's fine. Have you tried with a display-inline or nowrap of some sort?

basically it should be something like :

display: inline-block;  == d-*-inline bs4 class
white-space: nowrap; == text-nowrap bs4 class

If it doesn't work I'll take a closer look.

[netwavebe]

I'd rather not try to fix the jQuery plugin, but instead replace it with pure Bootstrap components and some javascript. Like the last screenshot shows.

The jQuery plugin breaks responsive behaviour, applies unwanted styling and the up/down buttons are too small imho.

Hence my question, I'd like to know if people think my proposition is okay and I should make a PR to change this.

[Skrypt]

If we can remove JQuery out of the picture in favor of using Bootstrap components I'm all in 😉
One less dependency is always a good thing.

[netwavebe]

My idea exactly!

[netwavebe]

Also related to #2266

[netwavebe]

Fixed in #7421