CODEWITHSUNDEEP
javascripthtmlcssangular
manish joshi
manish joshi

Reputation: 55

Errors are overriding other components

In my page Errors and warning section is in top. When Errors are increasing, They are overriding other components which is preventing to use components. I can handle 3-4 errors but they can come like 20-21. for this much error it is pain to write code . Please suggest any dynamic approach that can be done so errors always come on top components like this. This is how i want

This is what i am getting now

This is what i am getting now when error length are high

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';
        }

}

Upvotes: 0

Views: 71

Answers (1)

Nick
Nick

Reputation: 199

t's simple. Have a dedicated div for the errors in the layout.

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

give a max-height and min-height and set the overflow to auto for error-container. After that populate the error in the container. it will scale till the max-height and will start scrolling after that.

.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;
}

Upvotes: 1

Related Questions