Ant-design: 同时使用使用 Datepicker Select 时没有对齐

Created on 19 Oct 2016 · 5Comments · Source: ant-design/ant-design

发生问题的环境是：

antd 版本: 2.1.0
操作系统及其版本: win7 x64
浏览器及其版本: chrome 53.0.2785.143 m

您做了什么？

同时使用 Datepicker Select

您期待的结果是：

两个组件对齐

实际上的结果是：

两个控件没有对齐，需要在DatePicker 中增加 verticalAlign: 'middle'样式进行修复

可重现的在线演示

http://codepen.io/daysv/pen/BLqbxw

🐛 Bug

Source

daysv

Most helpful comment

Select 去掉 vertical-align: middle，保持和 Input、DatePicker 等一致的默认 vertical-align: baseline。
vertical-align: baseline 是按照 Select 内部自然排版的文本进行对齐，由于 Select 内部的 placeholder 和搜索框都是绝对定位（无法对齐），这里使用了一个小技巧，通过给内部补充一个始终存在的文本来对齐。
```
.ant-select-selection--single .ant-select-selection__rendered::after {
 content: '.';
 visibility: hidden;
 pointer-events: none;
}
```
.ant-select-selection__rendered 的 overflow: hidden 会影响文本对齐，去掉。
去掉后会破坏原来的文本溢出省略号效果，一一予以修正。
进一步连带修复被破坏的 combobox。

涉及非常多的样式细节...

afc163 on 19 Oct 2016

👍2

All 5 comments

Select 是有 vertical-align: middle 的，DatePicker 应该是忘了加。

benjycui on 19 Oct 2016

这个我来改，Select 不应该 vertical-align: middle。

afc163 on 19 Oct 2016

Select 去掉 vertical-align: middle，保持和 Input、DatePicker 等一致的默认 vertical-align: baseline。
vertical-align: baseline 是按照 Select 内部自然排版的文本进行对齐，由于 Select 内部的 placeholder 和搜索框都是绝对定位（无法对齐），这里使用了一个小技巧，通过给内部补充一个始终存在的文本来对齐。
```
.ant-select-selection--single .ant-select-selection__rendered::after {
 content: '.';
 visibility: hidden;
 pointer-events: none;
}
```
.ant-select-selection__rendered 的 overflow: hidden 会影响文本对齐，去掉。
去掉后会破坏原来的文本溢出省略号效果，一一予以修正。
进一步连带修复被破坏的 combobox。

涉及非常多的样式细节...

afc163 on 19 Oct 2016

👍2

另外还修复了多选 select 的 small/large 样式。

afc163 on 19 Oct 2016

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.