Topic: mdb-select label overlapping when the select is inside an accordion

ngervasi pro asked 4 years ago


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> ...

Arkadiusz Idzikowski staff commented 4 years ago

Could you provide a screenshot of this unexpected behavior?


ngervasi pro commented 4 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 4 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 4 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


Damian Gemza staff answered 4 years ago


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 4 years ago

Hi Damian, can you send me a private email where I can send the full code? Tnx


Damian Gemza staff commented 4 years ago

Sure, you can find me here: d.gemza@mdbootstrap.com


ngervasi pro commented 4 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,



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • ForumUser: 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