Touchspin + button isn't rendered with glyphicon

[Bhoft]

Prerequisites

• I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• The issue still exists against the latest master branch of yii2-widget-touchspin.
• This is not an usage question. I confirm having read the widget documentation and demos.
• This is not a general programming / coding question. (Those should be directed to the webtips Q & A forum).
• This is not a source plugin (touchspin) issue. (Those should be directed to the plugin issues repo).
• I have attempted to find the simplest possible steps to reproduce the issue.

Steps to reproduce the issue

Set the

    'verticalupclass' => 'glyphicon glyphicon-plus',
    'verticaldownclass' => 'glyphicon glyphicon-minus',

Also visible on the demos page for the button "Rating"
http://demos.krajee.com/widget-details/touchspin#advanced-usage

Setting the button texts works however

    'buttonup_txt' => '<i class="glyphicon glyphicon-plus"></i>',
    'buttondown_txt' => '<i class="glyphicon glyphicon-minus"></i>'

It also seems that the width of the input element isn't using the full column width any more (100% of e.g. col-md-9 with BS3) as with older versions.

Expected behavior and actual behavior

I was expecting...

The widget did work in version 1.2.1 but since 1.2.2 it doesn't (I also checked the dev version)

Sadly also the highlighting of errors or success validation doesn't look as good as with the older version.
older version:

never version (without glyphicon):

You see green borders on the right side when you have rounded corners.

I knew that the changes have something to do with the BS4 compatibility,

Browsers

• Google Chrome
• Mozilla Firefox
• Internet Explorer
• Safari

Operating System

• Windows
• Mac OS X
• Linux
• Mobile

Libraries

• jQuery version:
• yii2-widget-touchspin version:

Isolating the problem

• This bug happens on the widget demos page
• The bug happens consistently across all tested browsers
• This bug happens when using yii2-widget-touchspin without other plugins
• I can reproduce this bug in a jsbin

[Bhoft]

First of all thanks for the quick fixes ;)

I see that you have changed your code for the rating button on your demo page.
From:

   'verticalupclass' => 'glyphicon glyphicon-plus',
   'verticaldownclass' => 'glyphicon glyphicon-minus',

to use:

    'verticalup' => '<small><i class="glyphicon glyphicon-plus"></i></small>',
    'verticaldown' => '<small><i class="glyphicon glyphicon-minus"></i></small>'

instead.

What is the reason behind to use different attributes? And not use the same 'button_up_txt' etc.?

'verticalbuttons' => true,
'buttonup_txt' => 'up',
'buttondown_txt' => 'down',

I don't know if this is on purpose that you have verticalup and buttonup_txt in your javascript code.
But why don't you just use settings.buttonup_txt instead of settings.verticalup for the vertical buttons?

yii2-widget-touchspin/src/assets/js/jquery.bootstrap-touchspin.js

Line 298 in 34179c9

settings.verticalup +

yii2-widget-touchspin/src/assets/js/jquery.bootstrap-touchspin.js

Line 301 in 34179c9

settings.verticaldown +

Otherwise you have to set two additional attributes if you enable the vertical buttons or wonder why the button texts are not used when you enable the vertical buttons mode.

I guess this is still a left after some changes or has this something to do if you want to render the buttons again after the browser size was changed and use the vertical buttons for a particular size and then use some other button texts as before?

You have also removed some font setting which made the vertical buttons with glyphicons a little bit smaller in the font size. Which looked better in my opinion as if is it now.

.bootstrap-touchspin .input-group-btn-vertical i{
    font-size:9px;
    font-weight:400;
}

[kartik-v]

Note that the source plugin code itself has been UPGRADED to latest version since the last release - and most of these changes are all to fit as per the modified code designed by the original plugin author (I am not the author of the plugin 😄) .

Few modifications to the CSS and JS have been added specifically by me to fit for the Yii2 BS3 and BS4 users. Will check your other feedback and see if there is anything else missed.

[Bhoft]

I knew that you aren't the author of the original plugin as you can't do everything :)
But at least you try 👍

And of course to keep the plugin version up to date it is a requirement to use the original source.
I haven't thought that this could be the issue.