label is hidden on mdb-select without value

web
mobile

Topic: label is hidden on mdb-select without value

itay pro asked 4 months ago

Expected behavior

Label should appear as a placeholder when an mdb-select value is undefined

Actual behavior

Label is missing: https://imgur.com/a/W0ow1DW

Resources (screenshots, code snippets etc.)

After some digging I found that the label has a style of z-index: -1 introduced for mdb-select+label. Check this: https://imgur.com/a/jO4qkI0

Manually adding z-index: auto; to .label restores its visibility


Konrad Stępień staff commented 4 months ago

Hi, Does this apply to any particular example or to everyone?


itay pro commented 4 months ago

This is in my case. Cannot tell what others are experiencing


Konrad Stępień staff commented 4 months ago

Can you send me part of your code?

or tell me how I can reproduce your problem.


itay pro commented 4 months ago

There is nothing special


Konrad Stępień staff commented 4 months ago

Sorry, but I can't help you without the code.

When I copy an example from the documentation I do not have the same issue.

You are sure that you didn't overwrite styles?

<div class="row">
  <div class="col-md-6">
    <mdb-select [options]="optionsSelect" placeholder="Choose your option"></mdb-select>
  </div>
</div>

TS:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  optionsSelect: Array<any>;
  ngOnInit() {
    this.optionsSelect = [
      { value: '1', label: 'Option 1' },
      { value: '2', label: 'Option 2' },
      { value: '3', label: 'Option 3' },
    ];
  }
};

select


itay pro commented 4 months ago

Try using <label> after mdb-select with mdbTooltip


Arkadiusz Idzikowski staff commented 4 months ago

We tested that in many configurations. You can check if the label is correctly displayed in the new view/app that is not affected by any custom html structure or styles.

This problem may occur only in specific html structure or is caused by some custom css (which you use in this case because we doesn't support RTL in select yet) and we won't be able to reproduce it properly without additional information.


itay pro commented 4 months ago

As mentioned, after some digging I found that the label has a style of z-index: -1 introduced for mdb-select+label in your code.

It has nothing to do with RTL


Arkadiusz Idzikowski staff commented 4 months ago

It has negative z-index but it still should be rendered correctly in this case (and it does on our end). We will look for a better solution than the one with z-index anyway, but I think this is not the main cause of the problem here (or maybe it is only in specific use case).


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: 8.8.1
  • Device: NA
  • Browser: NA
  • OS: NA
  • Provided sample code: No
  • Provided link: Yes
Tags