mdbCollapse cuts fold out of mdb-select components


Topic: mdbCollapse cuts fold out of mdb-select components

Schermbecker asked 6 years ago

Hello support, currently I experience an issue using mdbCollapse. I use this collapsing container to show/hide an extended form the user can open/close. At the bottom of this mdbCollapse container is a mdb-select component. When I try to select an item the fold out content is cut off. I tried a lot to solve this and when I put div[mdbCollapse] { overflow:visible !important} to styles.scss the fold out is no more cut but the animation of mdbCollapse is broken then. Can you help?

Arkadiusz Idzikowski staff answered 6 years ago

Hello Schermbecker, Thank you for the confirmation and example code. Unfortunately I cannot provide an easy workaround for this problem. We will try to add the fix in new version. Regards, Arek

Arkadiusz Idzikowski staff answered 6 years ago

Hello Schermbecker, Could you provide some code on which I could debug your problem? Mdb select is a premium component, and according to our system, you use MDB Free version. Please, provide us a number of your order or registered email to confirm your access to MDB Pro components and premium support. You can send it to me on: a.idzikowski@mdbootstrap.com Regards, Arek
Hi Arkadiusz, my company bought the PRO version. I try to deliver the needed information to gain premium support for my account. Here is the code:
<div class="row border-top pt-4 pb-4">
    <div class="col-md-12">
        <button mdbBtn color="primary" class="btn btn-sm waves-light pull-right" type="button"
                mdbTooltip="Toggle search form" (click)="search.toggle()" mdbWavesEffect>
            <i *ngIf="icon" class="fa fa-2x fa-angle-up"></i>
            <i *ngIf="!icon" class="fa fa-2x fa-angle-down"></i>
        </button>
    </div>
</div>

<div mdbCollapse #search="bs-collapse">
    <form [formGroup]="searchForm" (ngSubmit)="searchUser()">
            <div class="col-md-12">
                <div class="md-form">
                    <label class="active">My Select</label>
                    <mdb-select formControlName="bla" [options]="optionsSelectOrg" [multiple]="false" [filterEnabled]="true"
                                placeholder="Select an option" (selected)="dosomething($event)"
                                class="primary"></mdb-select>
                </div>
            </div>
        </div>
    </form>
</div>
If you open the select field, its options are cut at the bottom line of the mdbCollapse-container.   Thanks for your support!  
Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.3
  • Device: PC
  • Browser: All
  • OS: Windows 7
  • Provided sample code: No
  • Provided link: No