NumericField Spinner: replaced jQuery UI with Bootstrap components & … #7421
Conversation
…added support for scale > 0 with localisation
|
#2266 discusses the problems the old spinner had. |
| <div class="input-group-append"> | ||
| <div class="input-group-text">@max</div> | ||
| <button class="btn btn-outline-secondary" type="button" onclick="numericFieldSpinner('@(id)', @(scale), -@(step), @(min), @(max))"><i class="fa fa-minus" aria-hidden="true"></i></button> |
There was a problem hiding this comment.
Could you try with btn-outline-light and show me a screenshot without commiting?
There was a problem hiding this comment.
They need to add one that matches the form input border color. 😢
There was a problem hiding this comment.
Agreed. btn-outline-secondary was visually the best (probably why it's used on https://getbootstrap.com/docs/4.0/components/input-group/#button-addons as a demo).
| }); | ||
| }); | ||
|
|
||
| <script asp-name="numericFieldSpinner" at="Foot"> |
There was a problem hiding this comment.
I don't think name is allowed on a script tag. It is not semantically correct. It should be used only when referencing a script from the ResourceManager. It should not render anything in the HTML, it's fine, but then you can also remove. 😄
There was a problem hiding this comment.
It's a server-side thing that does not get rendered to the client. Naming a script prevents the same script from rendering multiple times. If I remove this, the script is rendered for each spinner on the page. Naming the script prevents this: it's only rendered once for all spinners.
…added support for scale > 0 with localization
The old implementation, based on jQuery UI, had some issues. It was not responsive, it added unnecessary style classes and it did not support configured min/max values. Furthermore, it did not support scale > 0 at all.
I created a content type with some numeric fields. The hint shows how they are configured.
The old spinner in action:
I removed the jQuery UI dependency and replaced it with Bootstrap components. Styling and responsive behaviour is now in line with other fields. Values are also kept within the min/max range.
The new spinner in action:
Support for scale > 0 was also added. For this I had to check the decimal separator that is used on the server and optionally convert commas to points and vice versa. Look at the sourcecode how I implemented this. If there is a better way, I'd like to know.