Ant-design: Tidak ada keselarasan saat menggunakan Datepicker Select secara bersamaan

Dibuat pada 19 Okt 2016 · 5Komentar · Sumber: ant-design/ant-design

Lingkungan tempat masalah terjadi adalah:

versi antd: 2.1.0
Sistem operasi dan versinya: win7 x64
Browser dan versinya: chrome 53.0.2785.143 m
Apa yang kamu lakukan?

Gunakan Datepicker Select secara bersamaan

Hasil yang Anda harapkan adalah:

Dua komponen sejajar

Hasil sebenarnya adalah:

Kedua kontrol tidak selaras, Anda perlu menambahkan verticalAlign: 'middle' style di DatePicker untuk memperbaikinya

Demo online yang dapat direproduksi

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

🐛 Bug

Sumber

daysv

Komentar yang paling membantu

Pilih hapus vertical-align: middle dan pertahankan default vertical-align: baseline konsisten dengan Input, DatePicker, dll.
vertical-align: baseline disejajarkan sesuai dengan teks tipe natural di dalam Select. Karena placeholder dan kotak pencarian di dalam Select diposisikan secara absolut (tidak sejajar), sedikit trik digunakan di sini, dengan menambahkan teks yang selalu ada di dalam Select To meluruskan.
```
.ant-select-selection--single .ant-select-selection__rendered::after {
 content: '.';
 visibility: hidden;
 pointer-events: none;
}
```
.ant-select-selection__rendered dari overflow: hidden akan mempengaruhi perataan teks, hapus itu.
Setelah menghapusnya, efek elipsis luapan teks asli akan dihancurkan, dan akan dikoreksi satu per satu.
Perbaiki lebih lanjut kotak kombo yang rusak.

Banyak detail gaya yang terlibat ...

afc163 pada 19 Okt 2016

👍2

Semua 5 komentar

Select memiliki vertical-align: middle , DatePicker seharusnya lupa menambahkan.

benjycui pada 19 Okt 2016

Biarkan saya mengubah ini, Pilih tidak boleh vertical-align: middle .

afc163 pada 19 Okt 2016

Pilih hapus vertical-align: middle dan pertahankan default vertical-align: baseline konsisten dengan Input, DatePicker, dll.
vertical-align: baseline disejajarkan sesuai dengan teks tipe natural di dalam Select. Karena placeholder dan kotak pencarian di dalam Select diposisikan secara absolut (tidak sejajar), sedikit trik digunakan di sini, dengan menambahkan teks yang selalu ada di dalam Select To meluruskan.
```
.ant-select-selection--single .ant-select-selection__rendered::after {
 content: '.';
 visibility: hidden;
 pointer-events: none;
}
```
.ant-select-selection__rendered dari overflow: hidden akan mempengaruhi perataan teks, hapus itu.
Setelah menghapusnya, efek elipsis luapan teks asli akan dihancurkan, dan akan dikoreksi satu per satu.
Perbaiki lebih lanjut kotak kombo yang rusak.

Banyak detail gaya yang terlibat ...

afc163 pada 19 Okt 2016

👍2

Selain itu, gaya multi-pilihan small/large telah diperbaiki.

afc163 pada 19 Okt 2016

Utas ini telah dikunci secara otomatis karena tidak ada aktivitas terkini. Silakan buka masalah baru untuk bug terkait dan tautkan ke komentar yang relevan di utas ini.