警报存在时的条件间距

Question

我正在开发一个应用程序，他们设置的方式是他们希望警报显示在表的固定标题下。问题是，当警报出现时，警报框下面会出现下面未固定表格行的边距，这会导致警报和表格数据之间出现混乱空间，如下所示。

我知道在哪里我会将警报设置为固定或绝对，并在其下方添加一个div，并在警报出现时仅存在适当的余量。使用ng-if，如果警报存在，我怎么能显示这个新的div？我可以同时定位＆＃34;关闭＆＃34;或者＆＃34;解雇超时＆＃34;？这是警报的设置方式：

HTML：

<div ng-controller="AlertCtrl" class="alertControl">
    <alert class="ngAlert" ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)" dismiss-on-timeout="7000">{{alert.msg}}</alert>
</div>
<div class="alertSpacing" ng-if=""></div>

CSS：

.alertSpacing {
    height: 100px; //The proper amount of spacing between the fixed headings and the bottom of the alert
    width: 100%;
}

警报间隔div是警报处于活动状态时我只需要存在的那个。

感谢您提前提供任何帮助。

Answer 1

尝试将clear: both提供给班级：

.alertSpacing {
  clear: both;
}

Answer 2

您可以在表格上使用ng-class指令来设置具有保证金值的类，无论是否显示警报。

HTML：

<div ng-controller="AlertCtrl" class="alertControl">
    <alert class="ngAlert" ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)" dismiss-on-timeout="7000">{{alert.msg}}</alert>
</div>

<table ng-class="{'table-margin-top': alerts.length == 0}">
    ...
</table>

CSS：

table {
    margin-top: 100px;
}

.table-margin-top {
    margin-top: 0;
}