Skip to content

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

Description

@perimontu

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
      }
    }

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions