Topic: mdb-select label not attached properly

Ilimilku pro asked 7 years ago


I am having trouble getting the label attached to the mdb-select component to properly attach to the component as seen in the documentation examples. I have literally copy-pasted the code form the examples into my code, and I get a different result.

https://imgur.com/2yzLvHo

https://imgur.com/LvsTzkq

test.component.html

<div class="container">

  <div class="row mt-3">

    <div class="col-md-6">

      <div class="md-form">
        <input mdbActive type="text" id="firstName" class="form-control">
        <label for="firstName" class="">First Name</label>
      </div>


        <mdb-select  [options]="optionsSelect" placeholder="Marital Status"></mdb-select>
        <label>Marital Status</label>

    </div>

  </div>

</div>

test.component.ts

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

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {

  optionsSelect: Array<any>;

  constructor() { }

  ngOnInit() {
    this.optionsSelect = [
      { value: 'married', label: 'Married' },
      { value: 'singled', label: 'Single' },
      { value: 'divorced', label: 'Divorced' },
    ];
  }

}

I suspect this might be a problem due to the enormous difficulties associated with installing MDB Angular Pro into an Angular CLI project, since adequate documentation has yet to be provided. It stretches credulity to think that a product would be brought to full release without installation instructions! I have to cull through threads on this forum to figure it out, and they are littered with errors! So far, I am regretting my purchase of this product.


Adrian Sawicki free answered 7 years ago


Hello, Your select should have its own col-* div containing it, just as in example so the label with position absolute can position itself properly. Example:
<div class="container"><div class="container">
  <div class="row mt-3">
    <div class="col-md-12">
      <div class="md-form">
        <input mdbActive type="text" id="firstName" class="form-control">        
        <label for="firstName" class="">First Name</label>      
      </div>    
    </div>
    <div class="col-md-12">      
      <mdb-select [options]="optionsSelect" placeholder="Marital Status"></mdb-select>      
      <label>Marital Status</label> 
    </div>
  </div>
</div>


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: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags