[Select] Make width of select box as long as label.

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Select boxes have the same width as the label for the specific select box.

Current Behavior

Select box always has a width of 38px, no matter which label.

Context

I created a select box like this

const formControlOptions = {
    disabled: requirementFilter.values.length <= 1,

};

<FormControl {...formControlOptions}>
    <InputLabel htmlFor={requirementFilter.id}>
        {requirementFilter.label}
    </InputLabel>
    <Select key={requirementFilter.id}
            value={this.state.selectedFilters[requirementFilter.id] || ""}
            inputProps={{
                name: requirementFilter.id,
                id: requirementFilter.id,
            }}
            onChange={this.handleRequirementFilterSelected}
            children={requirementFilter.values.map((value: RequirementFilterValue) => {
                return (
                    <MenuItem value={value.id} data-parent={value.parent}>
                        {value.label} ({value.item_count})
                    </MenuItem>
                );
    })}/>
</FormControl>

This creates a selectbox, that looks like this

However, I want it to look like this

I could set the min-width, however, I want all select boxes to have a dynamic width, because some labels are shorter, therefore I also want a lower min-width for other select boxes, so min-width is not a possible solution.

Your Environment

Tech	Version
Material-UI	v1.0.0-beta.39
React	16
browser	Chrome (latest)

[kobelobster]

Okay, thanks to you pointing out that the label is the problem, I tried to do this

label {
  position: relative;
  padding-right: 25px;
  &+div{
    margin-top: 0;
    &:before {
      bottom: 5px;
    }
    &:after {
      bottom: 5px;
    }
    svg {
      top: 0;
    }
  }
}

This leads to the expected result. Since I’m no CSS expert, do you see any major problems with that solution? It’s resolution independent because we display this site only to users with a specific resolution.

[kobelobster]

Ah, I think there was a misunderstanding. I was just pointing out how I solved this, not how the library should solve this! So, this wasn’t a suggestion, but merely a description how I implemented it in case someone else stumbles upon this issue.

Thanks for your help!