即使删除任何 HTML DOM 元素，如何保持固定布局

Posted 2023-03-06

【中文标题】即使删除任何 HTML DOM 元素，如何保持固定布局

【英文标题】：How to maintain fixed layout even if removing any HTML DOM element

【发布时间】：2021-01-10 22:14:08

【问题描述】：

我需要有关使用引导程序进行 html 设计的帮助。 我在设计中使用选项卡，如果我使用 ngIf（Angular 代码）删除任何元素，则设计是 相应地进行调整，这是很明显的。

但是，我希望设计保持不变，即使我删除了任何元素。 我也使用了 [hidden] 而不是“ngIf”，但它仍然无法正常工作。

谁能帮帮我？

下面是我的html代码：

<div class="col-lg-5-12">
   <div id="SecCorrTxtBox" class="row"
        *ngIf ="(!isSecCorrelationCoeffHidden && isSecondaryCorrelationChecked)">
      <label class="col-lg-3-12 control-label">Coefficients</label>
      <div class="col-lg-3-12 remove-left-padding">
          <input type="number" class="form-control" name="coeffs2"
                 [(ngModel)]="secondaryCoeffParameter1"
                 min="0" step="1">
      </div>
   </div>
</div>

【问题讨论】：

你可以显示你的css代码！！

@MMezlini - 我没有使用我的自定义 CSS。都是引导类。

【参考方案1】：

也许您可以使用具有属性可见性的 [ngStyle] 或 [ngClass] 添加动态 CSS：隐藏。可见性隐藏仍然占用空间。

【参考方案2】：

您希望您的设计保留下来，您必须在集团为空时修复它。 span 将在您的条件为 false 时显示

<div class="col-lg-5-12">
   <span *ngIf ="!(!isSecCorrelationCoeffHidden && isSecondaryCorrelationChecked)"> &nbsp; </span>
   <div id="SecCorrTxtBox" class="row"
        *ngIf ="(!isSecCorrelationCoeffHidden && isSecondaryCorrelationChecked)">
      <label class="col-lg-3-12 control-label">Coefficients</label>
      <div class="col-lg-3-12 remove-left-padding">
          <input type="number" class="form-control" name="coeffs2"
                 [(ngModel)]="secondaryCoeffParameter1"
                 min="0" step="1">
      </div>
   </div>
</div>

这是你要求的吗？

【讨论】：

嗨@MMezlini，不，这不是我要找的。如果条件为假，我想显示整个 div。我尝试在 Angular 中使用 [hidden] 但它是一样的。 [style.visibility] 正在工作，但问题是：在 DIV 中有一组 3 个文本框和一个复选框。我想根据条件显示其中的任何一个。所以，我放了*ngIf。但是由于整个 DOM 元素都被移除了，因此设计也相应地进行了调整。我希望主 DIV 占据空间并保持固定。文本框组或复选框将根据条件显示。