Текст в div перемещается вверх, когда кнопка в том же div удаляется с помощью AngularJS ng-if

Question

Текст в div перемещается вверх, когда кнопка в том же div удаляется с помощью AngularJS ng-if

0

У меня есть div, который содержит текст и кнопку.

Когда я нажимаю на кнопку, она исчезает на основе критериев, которые контролируются ng-if, но это приводит к тому, что текст перемещается на пару пикселей!

Кажется, я не могу остаться в том же месте. Есть идеи?

Вот как выглядит HTML:

<div class="review-helpful">
  <span ng-if="showThis">Howdy there partner!</span>
  <span ng-if="!showThis">How they hanging?</span>
  <button ng-if="showThis" type="button" class="btn btn-default btn-helpful" ng-click="setShowThis(false)">Yes</button>
</div>

И вот CSS:

.review-helpful {
    margin-top: 5px;
    min-height: 23px;
    font-size: 12px;
    color: #696969;
}

.btn-helpful {
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 6px;
    padding-right: 6px;
    font-size: 12px;
}

Я подключил plnkr, чтобы показать точную проблему: http://plnkr.co/edit/9FqzhB3NJXHHnHtdfVvB

Tom O'Brien 06 нояб. 2015, в 23:03

Источник

Теги:

html

angularjs

css

1 ответ

Ещё вопросы

Sunil D. · Accepted Answer · 2015-11-06T19-29-00.000Z

Высота кнопки больше, чем высота текста в пролете.

Вероятно, существует миллион способов его решения. Один из способов - использовать стиль line-height:

.review-helpful {
    margin-top: 5px;
    min-height: 23px;
    font-size: 12px;
    color: #696969;
    line-height: 24px;
}