Can&#8217;t Manage Drop Downs to Work

Topic: Can’t Manage Drop Downs to Work

Bruno Blumenschein free asked 7 years ago

I can't make drop downs to work. Is drop down available on the free version at all?

I am on a very basic Angular 5 project, that i configured like the examples in the site.

Is there something else to do, like import scripts for popper.js for example, or anything?

Really going nuts here.

OBS: No erros appears no console, nor on Angular Cli. Just don't show the menus on drop down.

Thanks a lot

Add comment

Damian Gemza staff answered 7 years ago

1 0 Best answer

Dear Bruno,

Please tell me, are you using Angular code or jQuery? If you're used jQuery from mistake, it won't work. Please use this code and let me know how things looks like:
<pre class="code-toolbar language-markup"><code class=" language-markup">
<div class="btn-group" dropdown>
 <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle waves-light" mdbRippleRadius>
 Basic dropdown
 </button>

<div class="dropdown-menu dropdown-primary">
 <a class="dropdown-item" href="#">Action</a>
 <a class="dropdown-item" href="#">Another action</a>
 <a class="dropdown-item" href="#">Something else here</a>
 <div class="divider dropdown-divider"></div>
 <a class="dropdown-item" href="#">Separated link</a>
 </div>
</div>
 </code></pre>
Here's link for Angular dropdowns: https://mdbootstrap.com/angular/components/dropdowns/

Best Regards,

Damian

Dear Bruno,Please tell me, are you using Angular code or jQuery? If you're used jQuery from mistake, it won't work. Please use this code and let me know how things looks like: <div class="btn-group" dropdown> <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle waves-light" mdbRippleRadius> Basic dropdown button>

    <span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dropdown-menu dropdown-primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token punctuation"><</span>a <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dropdown-item<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Action<span class="token tag"><span class="token punctuation"></</span>a<span class="token punctuation">></span></span>
        <span class="token tag"><span class="token punctuation"><</span>a <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dropdown-item<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Another action<span class="token tag"><span class="token punctuation"></</span>a<span class="token punctuation">></span></span>
        <span class="token tag"><span class="token punctuation"><</span>a <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dropdown-item<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Something else here<span class="token tag"><span class="token punctuation"></</span>a<span class="token punctuation">></span></span>
        <span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>divider dropdown-divider<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span>
        <span class="token tag"><span class="token punctuation"><</span>a <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dropdown-item<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Separated link<span class="token tag"><span class="token punctuation"></</span>a<span class="token punctuation">></span></span>
    <span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span>

Here's link for Angular dropdowns: https://mdbootstrap.com/angular/components/dropdowns/Best Regards,Damian

Please insert min. 20 characters.

Dear Bruno, Please tell me, are you using Angular code or jQuery? If you're used jQuery from mistake, it won't work. Please use this code and let me know how things looks like:

<div class="btn-group" dropdown>
    <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle waves-light" mdbRippleRadius>
        Basic dropdown
    </button>

    <div class="dropdown-menu dropdown-primary">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
        <div class="divider dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div>

Here's link for Angular dropdowns: https://mdbootstrap.com/angular/components/dropdowns/ Best Regards, Damian

Bruno Blumenschein free commented 7 years ago

Most likely I got the code from the wrong version. This code works. Now I am starting to understand the structure of versions that are available in the site. Thank you very much. PS: Loving the tool so far.

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: Free
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Bruno Blumenschein

2Support score
1Questions 0Answers 0Snippets