Невозможно выровнять md-icon по правому краю внутри md-input-container в последней версии Angular Material

Я обновляю приложение с Angular Material 1.0.5 до 1.0.9.

В настоящее время у меня есть несколько контейнеров ввода, содержащих элементы выбора и значка, например

<md-input-container class="md-icon-right" flex>
    <label>Something</label>
    <md-select ng-model="option2" flex>
            <md-option ng-repeat="option in options">
            </md-option>
        </md-select>
    <md-icon class="material-icons">X</md-icon>
</md-input-container>

Так что это будет означать, что я получаю значок, появляющийся справа от выбора входа.

После обновления до 1.0.9 с использованием той же разметки, что и выше, значок теперь отображается слева.

Я просмотрел примеры ввода на странице демонстрации для AM 1.0.9 и не вижу, чтобы что-то изменилось в разных версиях.

Вот как это должно выглядеть в версии 1.0.5 — http://codepen.io/parky128/pen/rLWJNK

Просто измените включение сценария материала на версию 1.0.9, и вы увидите, что на самом деле это происходит начиная с версии 1.0.6.

Обратите внимание, что это кажется проблемой только при использовании md-select, на обычные входы это не влияет.

Я не вижу каких-либо критических изменений в их журнале изменений, чтобы сказать, почему это произошло.

Кто-нибудь знает, как я могу заставить значок выровняться по правому краю при использовании md-select внутри md-input-container для версии 1.0.6 и выше?

Спасибо


angularjs angular-material
person mindparse    schedule 01.07.2016    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Если вы проверите CSS md-icon для версии 1.0.5, вы увидите следующее:

введите здесь описание изображения

md-input-container.md-icon-right>md-icon:last-of-type {
  margin: 0;
  right: 2px;
  left: auto;
}

Это определено в angular-material.min.css.

Это не отображается при проверке md-icon для версии 1.0.9:

введите здесь описание изображения

Если вы добавите приведенный выше CSS в свой собственный файл CSS, он будет работать с версией 1.0.9 — CodePen< /а>

Следует также отметить, что md-input-container смещено влево. Это можно исправить (после дополнительной проверки) с помощью следующего CSS:

md-input-container.md-icon-right {
  padding-left: 0 !important;
}
person camden_kid    schedule 01.07.2016
comment
Отлично, спасибо, что заметили это и поделились со мной. Я поделюсь с командой AM и посмотрю, что они скажут. - person mindparse; 01.07.2016
comment
@mindparse Рад быть полезным. Я бы не стал долго ждать, пока команда AM ответит, поскольку я понимаю, что сейчас они сосредоточены на AM для Angular 2 и изучают только серьезные ошибки в AM 1. - person camden_kid; 01.07.2016