mdbCollapse cuts fold out of mdb-select components

Topic: mdbCollapse cuts fold out of mdb-select components

Schermbecker free asked 5 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?

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

1 0 Best answer

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

Add comment

Schermbecker free answered 5 years ago

0 0 Best answer

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:
<pre class="code-toolbar grey lighten-2 p-3 mb-3">
<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></pre>
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.

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!

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

0 0 Best answer

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

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: 6.2.3
Device: PC
Browser: All
OS: Windows 7
Provided sample code: No
Provided link: No

Schermbecker

65Support score
4Questions 5Answers 0Snippets