mdb-select inside a testimonial card

Start your code here

<!--Card-->
<div class="card testimonial-card">

  <!--Background color-->
  <div class="card-up special-color-dark">
  </div>

  <!--Avatar-->
  <div class="avatar"><img src="'/assets/img/avatar/avatar.jpg'" class="rounded-circle img-responsive">
  </div>

  <div class="card-body">
    <!--Name-->
    <div class="row">
      <div class="col-md-12">
        <mdb-select id="select" [options]="optionsSelect" placeholder="Choose your option"></mdb-select>
        <label for="select">Example label</label>
      </div>
    </div>
    <hr>
    <!--Quotation-->
    <p><i class="fa fa-quote-left"></i> some details</p>
  </div>
</div>
<!--Card-->

typescript:

optionsSelect: Array<any>;

constructor() {
}

ngOnInit() {
  this.optionsSelect = [
    { value: '1', label: 'Option 1' },
    { value: '2', label: 'Option 2' },
    { value: '3', label: 'Option 3' },
  ];
}

Damian Gemza staff commented 7 years ago

Dear Atineo, Unfortunately, for me, everything is working just fine. When I pick some options, select dropdown is closing. Also i didn't saw any problems with rendering it. But I have to inform you, that hovering on some options won't select it as user's choose. Only clicking on option will pick it. Best Regards, Damian

---

atineo@gmail.com pro commented 7 years ago

Hi Damian, Thanks for your response. Is there any chance the team can take another look into it? I've placed your same sample code in different scenarios (empty pages, in modals, in map info windows) and it never works as expected. I am aware that it will only close when you select an option, but in my case when I click on the desired option it doesn't do anything. It doesn't close nor it renders correctly. Can you check if I am missing a directive in the mdb-select element?

---

Damian Gemza staff commented 7 years ago

Altineo I'm using your code, and there's no problem because for me, everything is working just fine. Please tell me, which version of MDB Angular you're using? And some environment informations (OS, browser, ng version, typescript etc...). It would help me to debug your problem. Or if it's possible, please send me your project without node_modules directory at my mail: d.gemza@mdbootstrap.com Best Regards, Damian

---

atineo@gmail.com pro commented 7 years ago

Hi Damian, Unfortunately I can't send you my project since it's a very complex one that spans across a group of components. But here are the details of the environment: Angular CLI: 1.7.3 Node: 9.10.1 OS: win32 x64 Angular: 5.2.9 ... animations, common, compiler, compiler-cli, core, forms ... http, language-service, platform-browser ... platform-browser-dynamic, router @angular/cdk: 5.2.4 @angular/cli: 1.7.3 @angular-devkit/build-optimizer: 0.3.2 @angular-devkit/core: 0.3.2 @angular-devkit/schematics: 0.3.2 @ngtools/json-schema: 1.2.0 @ngtools/webpack: 1.10.2 @schematics/angular: 0.3.2 @schematics/package-update: 0.3.2 typescript: 2.4.2 webpack: 3.11.0

---

atineo@gmail.com pro commented 7 years ago

I also figured out that it is mainly not working when it is in a modal/snazzy info window within an agm-map. Something must be preventing the close event to fulfill. I used the component in a blank page and it renders fine and clicking on an option closes the dropdown as it should. The only difference that I see with your component demo page is the animation. In your demo the animation kinda slides down when opening. In my version it just fades in.

---

Damian Gemza staff commented 7 years ago

Dear atineo@gmail.com, could you make me a simple reproduction repository on github? Just use these components which produce you an unexpected behavior. I need to see exactly what is wrong there. Without this I'm unable to help you well. Best Regards, Damian

---