Ant-design: Il n'y a pas d'alignement lors de l'utilisation simultanée de Datepicker Select

Créé le 19 oct. 2016 · 5Commentaires · Source: ant-design/ant-design

L'environnement dans lequel le problème se produit est:

version antd: 2.1.0
Système d'exploitation et sa version: win7 x64
Navigateur et sa version: chrome 53.0.2785.143 m
Qu'est-ce que tu as fait?

Utiliser le sélecteur de date en même temps

Le résultat que vous attendez est:

Deux composants alignés

Le résultat réel est:

Les deux contrôles ne sont pas alignés, vous devez ajouter le style verticalAlign: 'middle' dans DatePicker pour corriger

Démo en ligne reproductible

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

🐛 Bug

Source

daysv

Commentaire le plus utile

Sélectionnez remove vertical-align: middle et conservez la valeur par défaut vertical-align: baseline cohérente avec Input, DatePicker, etc.
vertical-align: baseline est aligné en fonction du texte composé naturel dans Select. Puisque l'espace réservé et la zone de recherche à l'intérieur de Select sont positionnés de manière absolue (non alignés), une petite astuce est utilisée ici, en ajoutant un texte qui existe toujours à l'intérieur de Select To aligner.
```
.ant-select-selection--single .ant-select-selection__rendered::after {
 content: '.';
 visibility: hidden;
 pointer-events: none;
}
```
.ant-select-selection__rendered de overflow: hidden affectera l'alignement du texte, supprimez-le.
Après l'avoir supprimé, l'effet d'ellipse de débordement de texte d'origine sera détruit et corrigé un par un.
Réparez davantage la combobox endommagée.

Beaucoup de détails de style sont impliqués ...

afc163 le 19 oct. 2016

👍2

Tous les 5 commentaires

Select a vertical-align: middle , DatePicker aurait dû oublier d'ajouter.

benjycui le 19 oct. 2016

Permettez-moi de changer cela, Select ne devrait pas être vertical-align: middle .

afc163 le 19 oct. 2016

Sélectionnez remove vertical-align: middle et conservez la valeur par défaut vertical-align: baseline cohérente avec Input, DatePicker, etc.
vertical-align: baseline est aligné en fonction du texte composé naturel dans Select. Puisque l'espace réservé et la zone de recherche à l'intérieur de Select sont positionnés de manière absolue (non alignés), une petite astuce est utilisée ici, en ajoutant un texte qui existe toujours à l'intérieur de Select To aligner.
```
.ant-select-selection--single .ant-select-selection__rendered::after {
 content: '.';
 visibility: hidden;
 pointer-events: none;
}
```
.ant-select-selection__rendered de overflow: hidden affectera l'alignement du texte, supprimez-le.
Après l'avoir supprimé, l'effet d'ellipse de débordement de texte d'origine sera détruit et corrigé un par un.
Réparez davantage la combobox endommagée.

Beaucoup de détails de style sont impliqués ...

afc163 le 19 oct. 2016

👍2

De plus, le style small/large de la sélection multiple est fixe.

afc163 le 19 oct. 2016

Ce fil a été automatiquement verrouillé car il n'a pas eu d'activité récente. Veuillez ouvrir un nouveau numéro pour les bogues associés et un lien vers les commentaires pertinents dans ce fil de discussion.