mdb-select label overlapping when the select is inside an ac

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

ngervasi pro asked 5 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 5 years ago

Could you provide a screenshot of this unexpected behavior?

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

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

<p>Dear <a href="/profile/?id=34402" target="_blank" rel="nofollow">@ngervasi</a></p>

<p>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: </p>

<p>
        
          Collapsible Group Item #1
          
            
              
                
              
            
          
        </p>

<pre class="prettyprint"><code>    <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';
</code></pre>

<p>Best Regards,</p>

<p>Damian</p>

Please insert min. 20 characters.

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

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

Damian Gemza staff commented 5 years ago

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

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

Add comment

Write

Create snippet

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

ngervasi

Pro User 15Support score
4Questions 3Answers 0Snippets