Ant-design: При одновременном использовании Datepicker Select выравнивания нет

Созданный на 19 окт. 2016  ·  5Комментарии  ·  Источник: ant-design/ant-design

Среда, в которой возникает проблема:

  • версия antd: 2.1.0
  • Операционная система и ее версия: win7 x64
  • Браузер и его версия: хром 53.0.2785.143 м

    Что ты сделал?

Использовать Datepicker Select одновременно

Ожидаемый результат:

Выровнены два компонента

Фактический результат:

Два элемента управления не выровнены, вам нужно добавить стиль verticalAlign: 'middle' в DatePicker, чтобы исправить

Воспроизводимая онлайн-демонстрация

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

🐛 Bug

Самый полезный комментарий

  1. Выберите удалить vertical-align: middle и оставьте значение по умолчанию vertical-align: baseline соответствии с Input, DatePicker и т. Д.
  2. vertical-align: baseline выравнивается в соответствии с естественным набором текста внутри Select. Поскольку заполнитель и поле поиска внутри Select абсолютно позиционированы (не выровнены), здесь используется небольшой трюк, добавляя текст, который всегда существует внутри Select To выровнять.

    .ant-select-selection--single .ant-select-selection__rendered::after {
     content: '.';
     visibility: hidden;
     pointer-events: none;
    }
    
  3. .ant-select-selection__rendered из overflow: hidden повлияет на выравнивание текста, удалите его.
  4. После его удаления исходный эффект многоточия при переполнении текста будет уничтожен, и он будет исправляться один за другим.
  5. Дальнейшее восстановление поврежденного поля со списком.

Здесь задействовано множество стилевых деталей ...

Все 5 Комментарий

Select имеет vertical-align: middle , DatePicker должен был забыть добавить.

Позвольте мне изменить это, Select не должен быть vertical-align: middle .

  1. Выберите удалить vertical-align: middle и оставьте значение по умолчанию vertical-align: baseline соответствии с Input, DatePicker и т. Д.
  2. vertical-align: baseline выравнивается в соответствии с естественным набором текста внутри Select. Поскольку заполнитель и поле поиска внутри Select абсолютно позиционированы (не выровнены), здесь используется небольшой трюк, добавляя текст, который всегда существует внутри Select To выровнять.

    .ant-select-selection--single .ant-select-selection__rendered::after {
     content: '.';
     visibility: hidden;
     pointer-events: none;
    }
    
  3. .ant-select-selection__rendered из overflow: hidden повлияет на выравнивание текста, удалите его.
  4. После его удаления исходный эффект многоточия при переполнении текста будет уничтожен, и он будет исправляться один за другим.
  5. Дальнейшее восстановление поврежденного поля со списком.

Здесь задействовано множество стилевых деталей ...

Кроме того, исправлен стиль множественного выбора small/large .

Эта цепочка была автоматически заблокирована, потому что в ней не было активности в последнее время. Пожалуйста, откройте новую проблему для связанных ошибок и дайте ссылку на соответствующие комментарии в этой ветке.

Была ли эта страница полезной?
0 / 5 - 0 рейтинги