Material-components-web: MDCSelect wrong setStyle width

Created on 3 Jul 2017 · 9Comments · Source: material-components/material-components-web

What MDC-Web Version are you using?

[email protected]

What browser(s) is this bug affecting?

Only tested chrome and firefox on GNOME

What OS are you using?

Ubuntu Gnome 17.04

What are the steps to reproduce the bug?

MDCSelect.attachTo(element)
done.

What is the expected behavior?

mdc-select width should be correct

What is the actual behavior?

returns short values.

Any other information you believe would be useful?

When not yet attaching an instance, the element looks good. Once initialized, the selected text cannot be seen.

bug

Source

xxRockOnxx

👍1

Most helpful comment

Do you do somthing like

* {
  box-sizing: border-box;
}

'cause then that's your problem.
The width is calculated as content-box

RobertSmits on 4 Dec 2017

👍2

All 9 comments

Would you mind uploading a few screen shots of this behavior?

amsheehan on 6 Jul 2017

Screenshot:

Temporary fix: empty function for setStyle

xxRockOnxx on 7 Jul 2017

Related issue #1335

kmmbvnr on 30 Nov 2017

I fixed this by patching select, to allow spread them to the whole container width

import {select} from 'material-components-web';

class MDCSelect extends select.MDCSelect {
  getDefaultFoundation() {
    let foundation = super.getDefaultFoundation(),
        super_setMenuStyle = foundation.setMenuStylesForOpenAtIndex_

    foundation.resize = function() {
      /* no action here */
    }

    foundation.setMenuStylesForOpenAtIndex_ = function (index) {
      super_setMenuStyle.call(foundation, index)

      const rect = foundation.adapter_.computeBoundingRect()
      foundation.adapter_.setMenuElStyle('width', `${rect.width}px`);
    }

    return foundation
  }
}

kmmbvnr on 1 Dec 2017

same issue