Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: label is hidden on mdb-select without value

itay pro asked 4 years 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 years ago

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


itay pro commented 4 years ago

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


Konrad Stępień staff commented 4 years ago

Can you send me part of your code?

or tell me how I can reproduce your problem.


itay pro commented 4 years ago

There is nothing special


Konrad Stępień staff commented 4 years 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 years ago

Try using <label> after mdb-select with mdbTooltip


Arkadiusz Idzikowski staff commented 4 years 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 years 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 years 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.

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: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.8.1
  • Device: NA
  • Browser: NA
  • OS: NA
  • Provided sample code: Yes
  • Provided link: Yes