label is hidden on mdb-select without value

Konrad Stępień staff commented 5 years ago

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

itay pro commented 5 years ago

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

Konrad Stępień staff commented 5 years ago

Can you send me part of your code?

or tell me how I can reproduce your problem.

itay pro commented 5 years ago

There is nothing special

Konrad Stępień staff commented 5 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' },
    ];
  }
};

itay pro commented 5 years ago

Try using <label> after mdb-select with mdbTooltip

Arkadiusz Idzikowski staff commented 5 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 5 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 5 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).