Блог

Главная - Вопросы по программированию - Как я могу защитить высоту строки при скрытии div

Как я могу защитить высоту строки при скрытии div

#css #angular

#css #угловой

Вопрос:

У меня есть компонент angular 2 с более чем одной строкой. Я запрашиваю сервер при изменении любой информации. Во время запроса я хочу скрыть этот компонент и вместо него поместить индикатор выполнения, но индикатор выполнения — это всего одна строка. Я хочу, чтобы высота компонента не менялась, когда я помещаю индикатор выполнения.

 <!--when this div hide-->
<div class="form-group row" *ngIf="!condition">
  <div class="col-sm-12">
    <div class="form-group row">
        <div class="col-sm-12">
            ROW 1
        </div>
    </div>
    <div class="form-group row">
        <div class="col-sm-12">
            ROW 2
        </div>
    </div>
    <div class="form-group row">
        <div class="col-sm-12">
            ROW 3
        </div>
    </div>
  </div>
</div>
<!--this div show-->
<div class="form-group row" *ngIf="condition">
    Progress bar
</div>

Комментарии:

1. минимальная высота для строки решит вашу проблему

Ответ №1:

Здесь работает репозиторий stackblitz.

Вы можете добиться этого с помощью ngStyle директивы,

component.ts 

 public condition: boolean = true;

component.html

 <!--when this div hide-->
<div class="form-group row" [ngStyle]="{'visibility': condition ? 'hidden' : 'visible' }">
  <div class="col-sm-12">
    <div class="form-group row">
        <div class="col-sm-12">
            ROW 1
        </div>
    </div>
    <div class="form-group row">
        <div class="col-sm-12">
            ROW 2
        </div>
    </div>
    <div class="form-group row">
        <div class="col-sm-12">
            ROW 3
        </div>
    </div>
  </div>
</div>
<!--this div show-->
<div class="form-group row" *ngIf="condition">
    Progress bar
</div>

Ответ №2:

*ngIf="!condition" не скрывает элемент, он полностью удаляет его из DOM. Вместо этого вы хотите применить visibility: hidden свойство отображения.

 <div [class.hidden]="condition">...

CSS:

 .hidden {
   visibility: hidden;
}

Альтернативным решением было бы поместить его во внешний контейнер с определенной высотой (то есть, если вы можете статически определить его вес, так что: внутренний имеет более или менее постоянный размер):

 <div class="spacer">
   <div *ngIf="!condition">Your inner div goes here
   </div>
</div>

CSS:

 .spacer {
   height: 3rem;
}