Error or success messages for mdbInputDirective

Topic: Error or success messages for mdbInputDirective

besenti pro asked 6 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 6 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/

Add comment

glyn.bowden pro answered 6 years ago

0 0 Best answer

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
<div class="styles-section matched-styles monospace" role="treeitem">
<div class="styles-section-title styles-selector">
<div><span class="selector"><span class="simple-selector selector-matches">.md-form .prefix ~ .inputVal</span></span> {</div>
<div><span class="webkit-css-property">      margin-left</span>: <span class="value">3rem</span>;</div>
</div>
<div class="sidebar-pane-closing-brace">}
<div class="sidebar-pane-section-toolbar toolbar">
<div class="toolbar-shadow"></div>
</div>
</div>
</div>
<div class="styles-section matched-styles monospace" role="treeitem">
<div class="styles-section-title styles-selector">
<div class="media-list media-matches"><span class="selector"><span class="simple-selector selector-matches">.inputVal</span></span> {</div>
<div class="media-list media-matches"><span class="webkit-css-property">      font-size</span>: <span class="value">.8rem</span>;</div>
<div class="media-list media-matches"><span class="webkit-css-property">      position</span>: <span class="value">absolute</span>;</div>
<div class="media-list media-matches"><span class="webkit-css-property">      top</span>: <span class="value">60px</span>;</div>
</div>
<div class="sidebar-pane-closing-brace">}</div>
</div>
<div></div>
<div>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).</div>
<div></div>
<div>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.</div>
<div></div>
<div>Thanks!</div>

Please insert min. 20 characters.

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 6 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 6 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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

besenti

Pro User 0Support score
2Questions 0Answers 0Snippets