angular / angular/components

feat(select): allow auto-width based on placeholder / value

未关闭
#7,627 12 条评论 30 个 reaction 已指派 0 人 在 GitHub 查看
area: material/select feature P3
主要语言
TypeScript
星标
25k
派生
6.8k
平均合并
1 天 8 小时
30 天内合并 PR
91

描述

### fixed width on mat-form-field
I want my select to have the width of the selected item, fixed width on mat-form-field makes it impossible, you can override `.mat-form-field` to have `width` `auto`, along with overriding `.mat-select-value` to be `width` `auto` and `max-width` `100%`, but then you have a problem, because placeholder is absolutely positioned, which means that the select without any value set yet will be zero width (actually 18px because of the arrow).

https://stackblitz.com/edit/material2-select-width-issues?file=styles.scss

Now I could also override placeholders not to be absolutely positioned, but that's not gonna work properly either, because the arrow is inside the `md-select` element, while the placeholder is outside

![image](https://user-images.githubusercontent.com/1303561/31315390-330fa1e6-ac18-11e7-8b95-a19923299262.png)

I'm not sure if that 200px width is something that's on material spec, but the DOM could perhaps be structured a bit differently, in a way that wouldn't prevent devs from achieving fluid width (which is a bit closer to how native selects work)

## different height when selected vs. placeholder
![image](https://user-images.githubusercontent.com/1303561/31315458-4a4e4276-ac19-11e7-8d0d-98b9058da2c7.png)

cc @crisbeto

贡献指南

打开贡献指南

调研方向

从链接的 StackBlitz 复现开始,检查涉及 fixed-width 和 placeholder 情况的 mat-form-field 与 mat-select 结构。将当前行为与所请求的 auto-width 行为进行比较,分别针对空 placeholder 和已选值;完成的标准是 select 能够灵活调整大小,同时不破坏箭头或 placeholder 的布局。

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, typescript
领域
design, frontend
Issue 类型
功能
难度
5/5
预计耗时
一周以上
活跃度
停滞
描述清晰度
基本清楚
新手友好度
30/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。