Button Gradient and Social Button is Not Working

Topic: Button Gradient and Social Button is Not Working

Jalves pro asked 6 years ago

Hello -

Do you happen to know why the button with the gradient and social icon is not working for MDB Pro Angular?

I have tried most of the component and they are working fine, I am only having the issue with Button. May there is some extra installation step that I am not aware of.

Thank you in advance for your help.
Justimiano Alves

Dawid Adach pro commented 6 years ago

Dear Jalves, could you please attach sample code? I've just checked sample buttons from: https://mdbootstrap.com/angular/components/buttons/#gradient-buttons and they work like a charm. Please check if you are using correct syntax (for Angular)

Damian Gemza staff commented 6 years ago

Dear Jalves, could you paste your code not in a comment, but in a new answer? Also please use code-formatting, because that's unusable. Best Regards, Damian

Jalves pro commented 6 years ago

Dear Dawid and Damian, I have pasted the code into new answer boxes below for your reference, Thank you, Justimiano Alves

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Dear Jalves,

Could you show me screenshot which shows actual behavior of your code? Here's my screenshot and your code with some fixes from my side:

https://screenshots.firefox.com/DJ5BUrccxl3zSX7o/localhost

And here's the code:
<div>
<pre><section class="form-elegant sign-up">

<strong>Create an account</strong>

</h3>

</div>

</div>

<label for="inputIconEx1">E-mail address</label>

</div>

<label for="inputValidationEx2"data-error="wrong"data-success="right">Type your password</label>

</div>

<button class="btn btn-block purple-gradient btn-rounded waves-light "mdbWavesEffect>Purple</button>

</div>

</i> Facebook</button>

<i class="fa fa-google-plus white-text"></i> Google+</button>

</div>

<p class="font-small grey-text d-flex justify-content-end">Already have an account?

</p>

</div>

</div>

</section></pre>
</div>
I have tested it on my dev version of MDB Angular 6.0.2 Ubuntu 17.10 Firefox Quantum 58.

Please let me know if this code works to you.

Best Regards,

Damian

Please insert min. 20 characters.

Dear Jalves, Could you show me screenshot which shows actual behavior of your code? Here's my screenshot and your code with some fixes from my side: https://screenshots.firefox.com/DJ5BUrccxl3zSX7o/localhost And here's the code:

<section class="form-elegant sign-up">

<div class="container ">

<div class="row d-flex justify-content-center">

<div class="col-md-6">

<!--Form without header-->

<div class="card">

<div class="card-body mx-4">

<!--Header-->

<div class="text-center">

<h3 class="dark-grey-text mb-5">

<strong>Create an account</strong>

</h3>

</div>

<!--Body-->

<div class="md-form">

<i class="fa fa-user prefix"></i>

<input type="text"id="inputIconEx2"class="form-control"mdbInputDirective>

<label for="inputIconEx2">Full Name</label>

</div>

<!-- Material input -->

<div class="md-form">

<i class="fa fa-envelope prefix"></i>

<input type="text"id="inputIconEx1"class="form-control"mdbInputDirective>

<label for="inputIconEx1">E-mail address</label>

</div>

<!-- Material input -->

<div class="md-form">

<i class="fa fa-lock prefix"></i>

<input type="password"id="inputValidationEx2"class="form-control validate"mdbInputDirective>

<label for="inputValidationEx2"data-error="wrong"data-success="right">Type your password</label>

</div>

<div class="text-center mb-3">

<button class="btn btn-block purple-gradient btn-rounded waves-light "mdbWavesEffect>Purple</button>

</div>

<p class="font-small dark-grey-text text-right d-flex justify-content-center mb-3 pt-2"> or Sign in with:</p>

<div class="row my-3 d-flex justify-content-center">

<!--Facebook-->

<button type="button"class="btn btn-fb waves-effect waves-light"mdbWavesEffect>

<i class="fa fa-facebook white-text text-center">

</i> Facebook</button>

<!--Google +-->

<button type="button"class="btn btn-gplus waves-effect waves-light"mdbWavesEffect>

<i class="fa fa-google-plus white-text"></i> Google+</button>

</div>

</div>

<!--Footer-->

<div class="modal-footer mx-5 pt-3 mb-1">

<p class="font-small grey-text d-flex justify-content-end">Already have an account?

<a routerLink="/login"routerLinkActive="active"class="blue-text ml-1">Sing In</a>

</p>

</div>

</div>

<!--/Form without header-->

</div>

</div>

</div>

</section>

I have tested it on my dev version of MDB Angular 6.0.2 Ubuntu 17.10 Firefox Quantum 58. Please let me know if this code works to you. Best Regards, Damian

Jalves pro commented 6 years ago

Hi Dear Damian, Unfortunately, it's still not working for me. Below is the screenshot what I am seeing. https://screenshots.firefox.com/DjRI2d4G5DMnqvnq/localhost Please, let me know if you need anything else. Thank you, Justimiano

Damian Gemza staff commented 6 years ago

Dear Jalves, I have to ask you about this - are you using MDB Angular Free or Pro version? Social buttons and gradients are available only in Pro version. Your actual behavior suggest, that you're using free. Waiting to hear something from you. Best Regards, Damian

Jalves pro commented 6 years ago

Dear Damian, I purchased the MDB Angular Pro Version using license for 1 project and 1 person. I have followed up the steps listed on this link https://mdbootstrap.com/getting-started/5min-quickstart/ to set up my local environment. I have done all steps over again and still not working. It could be that MDB Angular Pro version is not working for me because I try to use the chart and it's not working as well. But, I still need to look further into this component. Please, let me know any advice. Thank you, Justiniano Alves

Damian Gemza staff commented 6 years ago

Dear Jalves, Could you send me your project without node_modules directory at d.gemza@mdbootstrap.com? I want to debug it. Best Regards, Damian

Add comment

Jalves pro answered 6 years ago

0 0 Best answer

<p>Dear Damian,</p>
<p>I am sending you the sign-up code where I am facing issue with Gradient button.</p>
<pre><section class="form-elegant sign-up"><divclass="container "><divclass="row d-flex justify-content-center"><divclass="col-md-6"></pre>
<pre><divclass="card"><divclass="card-body mx-4"></pre>
<pre><divclass="text-center"><h3class="dark-grey-text mb-5"><strong>Create an account</strong></h3></div><divclass="md-form"><iclass="fa fa-user prefix"></i></pre>
<pre><inputtype="text"id="inputIconEx2"class="form-control"><labelfor="inputIconEx2">Full Name</label></div><divclass="md-form"><iclass="fa fa-envelope prefix"></i></pre>
<pre><inputtype="text"id="inputIconEx1"class="form-control"><labelfor="inputIconEx1">E-mail address</label></pre>
<pre></div><divclass="md-form"><iclass="fa fa-lock prefix"></i><inputtype="password"id="inputValidationEx2"class="form-control validate"></pre>
<pre><labelfor="inputValidationEx2"data-error="wrong"data-success="right">Type your password</label></div><divclass="text-center mb-3"></pre>
<pre><buttonclass="btn btn-block purple-gradient btn-rounded waves-light "mdbWavesEffect>Purple</button></pre>
<pre></div><pclass="font-small dark-grey-text text-right d-flex justify-content-center mb-3 pt-2"> or Sign in with:</p></pre>
<pre><divclass="row my-3 d-flex justify-content-center"></pre>
<pre><buttontype="button"class="btn btn-fb waves-effect waves-light"><iclass="fa fa-facebook blue-text text-center"></pre>
<pre></i> Facebook</button><buttontype="button"class="btn btn-gplus waves-effect waves-light"></pre>
<pre><iclass="fa fa-google-plus pink-text"></i> Google+</button></div></div><divclass="modal-footer mx-5 pt-3 mb-1"></pre>
<pre><pclass="font-small grey-text d-flex justify-content-end">Already have an account? <arouterLink="/login"routerLinkActive="active"class="blue-text ml-1">Sing In</a></pre>
<pre></p></div></div></div></div></div></section></pre>
<pre></pre>

Please insert min. 20 characters.

Dear Damian,

I am sending you the sign-up code where I am facing issue with Gradient button.

<section class="form-elegant sign-up"><divclass="container "><divclass="row d-flex justify-content-center"><divclass="col-md-6">

<!--Form without header--><divclass="card"><divclass="card-body mx-4"><!--Header-->

<divclass="text-center"><h3class="dark-grey-text mb-5"><strong>Create an account</strong></h3></div><!--Body--><divclass="md-form"><iclass="fa fa-user prefix"></i>

<inputtype="text"id="inputIconEx2"class="form-control"><labelfor="inputIconEx2">Full Name</label></div><!-- Material input --><divclass="md-form"><iclass="fa fa-envelope prefix"></i>

<inputtype="text"id="inputIconEx1"class="form-control"><labelfor="inputIconEx1">E-mail address</label>

</div><!-- Material input --><divclass="md-form"><iclass="fa fa-lock prefix"></i><inputtype="password"id="inputValidationEx2"class="form-control validate">

<labelfor="inputValidationEx2"data-error="wrong"data-success="right">Type your password</label></div><divclass="text-center mb-3">

<buttonclass="btn btn-block purple-gradient btn-rounded waves-light "mdbWavesEffect>Purple</button>

</div><pclass="font-small dark-grey-text text-right d-flex justify-content-center mb-3 pt-2"> or Sign in with:</p>

<divclass="row my-3 d-flex justify-content-center"><!--Facebook-->

<buttontype="button"class="btn btn-fb waves-effect waves-light"><iclass="fa fa-facebook blue-text text-center">

</i> Facebook</button><!--Google +--><buttontype="button"class="btn btn-gplus waves-effect waves-light">

<iclass="fa fa-google-plus pink-text"></i> Google+</button></div></div><!--Footer--><divclass="modal-footer mx-5 pt-3 mb-1">

<pclass="font-small grey-text d-flex justify-content-end">Already have an account? <arouterLink="/login"routerLinkActive="active"class="blue-text ml-1">Sing In</a>

</p></div></div><!--/Form without header--></div></div></div></section>

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

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

Jalves

Pro User 10Support score
1Questions 1Answers 0Snippets