错误覆盖了其他组件

Question

在我的页面中，错误和警告部分位于顶部。当错误增加时，它们将覆盖其他组件，从而阻止使用组件。 我可以处理3-4个错误，但可能会出现20-21个错误。对于这样的错误，编写代码很痛苦。 请提出任何可行的动态方法，这样错误总是会出现在此类顶级组件上。

当错误长度很高时，这就是我现在得到的东西

if (response.errors.length) {
          this.error = true;
          this.success = false;
          this.messages = response.errors;
          this.submitDisabled = true;
         if (response.errors.length === 3 && accountType === null) {
          nameAddressType.style.marginTop = '37px';
          contactInfoType.style.marginTop = '37px';
        } else if (response.errors.length === 2 && accountType === null) {
          nameAddressType.style.marginTop = '17px';
          contactInfoType.style.marginTop = '17px';
        }

}

Answer 1

t很简单。为布局中的错误设置一个专用的div。

<div id="menu-container"></div>
<div id="error-contaienr"></div>
<div id="application-container"></div>

给出最大高度和最小高度，并为错误容器将溢出设置为自动。之后，将错误填充到容器中。它将一直缩放到最大高度，然后开始滚动。

.error-container {
  position:relative; /*any other wont fit you use case*/
  max-height:300px; /*max height you want the error widget to take*/
  min-height: 30px; /*assuming you have a header to display, it can be 0*/
  overflow:auto;
}