Topic: mdb-select label overlapping when the select is inside an accordion
Whe the select is inside a collapsed accordion item the label is overlapping the default content. It works fine if the accordion is not collapsed:
<mdb-accordion-item>
<mdb-accordion-item-head>Ricerca Leggi Speciali</mdb-accordion-item-head>
<mdb-accordion-item-body>
<p class="text-muted info">Puoi cercare i reati previsti dalla legislazione penale speciale.</p>
<form #formLS="ngForm">
<div class="row">
<div class="col-4">
<div class="md-form" style="padding-top: 4px;">
<!-- FIXME: had to remove because of overlapping: [label]="'Fonte'" -->
<mdb-select [(ngModel)]="selectedtipoLeggeSpeciali" [options]="tipoLeggiSpeciali" [label]="'Fonte'" id="tipo" name="tipo"></mdb-select>
</div>
</div> ...
Dear @ngervasi
I have tried to reproduce your problem, but without success. Could you please provide me with the full code of your example (HTML and TS)? Please take a look at my code:
Collapsible Group Item #1
<mdb-accordion-item>
<mdb-accordion-item-head>Collapsible Group Item #2</mdb-accordion-item-head>
<mdb-accordion-item-body>
<div class="row">
<div class="col-md-6">
<mdb-select [(ngModel)]="selected" [options]="optionsSelect" [label]="'Choose your option'"></mdb-select>
</div>
</div>
</mdb-accordion-item-body>
</mdb-accordion-item>
</mdb-accordion>
optionsSelect = [
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2', selected: true },
{ value: '3', label: 'Option 3' },
];
selected = '2';
Best Regards,
Damian
ngervasi pro commented 6 years ago
Hi Damian, can you send me a private email where I can send the full code? Tnx
Damian Gemza staff commented 6 years ago
Sure, you can find me here: d.gemza@mdbootstrap.com
ngervasi pro commented 6 years ago
Hi Damian, fortunately the problem is fixed by your today release (7.5.4), I'm sure it was this:
Select label with prefilled value 0 won't break lifting up label element,
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 7.5.1
- Device: any
- Browser: any
- OS: any
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 6 years ago
Could you provide a screenshot of this unexpected behavior?
ngervasi pro commented 6 years ago
Sure but I can't find a way to attach a screenshot to the post... :( Can you give me a hint or contact me on email for the screenshots?
Tnx
Damian Gemza staff commented 6 years ago
Please upload the screenshot to one of the image-hosting services, like imageshack, and provide us a link to the image here.
Or you can simply add it to the Dropbox / Google Drive, and again, paste here us a share link.
ngervasi pro commented 6 years ago
The label is ok for the first accordion item (opened by default): https://imagizer.imageshack.com/img924/9751/JWdnRQ.png
But is not ok for the second one: https://imagizer.imageshack.com/img922/5573/mNTaQS.png