Bttstrp / bootstrap-switch

Turn checkboxes and radio buttons in toggle switches.
MIT License
5.08k stars 1.44k forks source link

Wrapper width show part of the second option in Edge #729

Open FleaFieldy opened 4 years ago

FleaFieldy commented 4 years ago

Hello guys, thank you for you work.

If you open the demo fiddle of yours on microsoft edge: https://jsfiddle.net/djibe89/vL87w0j8/ and go to the "Checked by default, secondary color when toggled, grey when idle." part, click on the bootstrap-swicth with the magenta "ON". You will see a small magenta border on the right. Remember to check it out with Microsoft Edge.

image

I've made a workaround in "value: function _width() {", I think that you could do better.

{
      key: '_width',
      value: function _width() {
        var _this2 = this;

        var $handles = this.$on.add(this.$off).add(this.$label).css('width', '');
        var handleWidth = this.options.handleWidth === 'auto' ? Math.round(Math.max(this.$on.width(), this.$off.width())) : this.options.handleWidth;
        $handles.width(handleWidth);
        this.$label.width(function (index, width) {
          if (_this2.options.labelWidth !== 'auto') {
            return _this2.options.labelWidth;
          }
          if (width < handleWidth) {
            return handleWidth;
          }
          return width;
        });
        this._handleWidth = this.$on.outerWidth();
        this._labelWidth = this.$label.outerWidth();
        this.$container.width(this._handleWidth * 2 + this._labelWidth);
        return this.$wrapper.width((this._handleWidth + this._labelWidth)-2); //just stripe two pixels
      }
    }
john-larson commented 3 years ago

This can be seen in Chrome, too.