Error or success messages for mdbInputDirective

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Error or success messages for mdbInputDirective

besenti pro asked 7 years ago

How do I neatly display error or success message  without the messages overlaying on the next component below? Do I have to increase space between components (if so how?) or what? My code is below: <form> <divclass="md-form"> <iclass="fa fa-envelope prefix"></i> <inputmdbInputDirectivedata-error="wrong email"type="email"id="email"class="form-control"name='email'required [(ngModel)]='email'> <labelfor="email">Enter your email</label> </div> <divclass="md-form"> <iclass="fa fa-lock prefix"></i> <inputmdbInputDirectivetype="password"class="form-control"id="password"name="password"required [(ngModel)]="pass"> <labelfor="password">Type your password</label> </div> </form>  

Dawid Adach pro commented 7 years ago

Dear besenti, yes you can use padding and margins classes (depending on desired effect) like mt-x my-x etc. Please read more about spacing classes here: https://mdbootstrap.com/angular/utilities/bootstrap-spacing/

glyn.bowden pro answered 7 years ago

I have the same problem and I don't think the correct fix is to move the next element down. It really needs the error message to move up and left a bit. Looking at the generated CSS it ends up with
.md-form .prefix ~ .inputVal {
      margin-left: 3rem;
}
.inputVal {
      font-size: .8rem;
      position: absolute;
      top: 60px;
}
I found the better values (from playing around in debug) are "margin-left: 2.5rem" and "top: 35px". Which aligns exactly where i need (at least on Chrome on my Mac which is currently all I've tested).
Can you let me know either where these values are calculated and how (as they appear to be scaled wrongly), or how I can override them successfully. I tried adding them to my components css (with !important) and also my apps overall css with no effect.
Thanks!

Dawid Adach pro commented 7 years ago

Thanks glyn, we are looking into this. I will come back as soon as we will have update on that.

Damian Gemza staff commented 7 years ago

Dear Glyn, We will add the exact same solution in next release of MDB Angular. Thanks for your's report! Best Regards, Damian
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
besenti
Pro User
0Support score
2Questions 0Answers
0Snippets likes 0Snippets