Topic: Problem in select box

sdhakad pro asked 4 years ago


In select box the label overlaped on the select box. you can see the screen shot in give link https://ibb.co/d4cHFR

Dawid Adach pro answered 4 years ago


Dear sdhakad, please make sure to use mdbActive directive. In case you want to add data using 2 ways data bidning, please make sure to add "active" class to label whenever data input is getting filled.

sdhakad pro commented 4 years ago

Still i have same issue. check the code <div class="md-form"> <mdb-select [options]="gender" placeholder="Choose your option" formControlName="gender" class="form-control" [ngClass]="signupForm.controls['gender'].invalid && signupForm.controls['gender'].touched ? 'invalid': 'valid'" mdbActive></mdb-select> <label class="active" for="gender">Gender</label> </div>

Dawid Adach pro commented 4 years ago

Dear sdhakad, does simple input works for you? If you take basic example from here, does label goes up? https://mdbootstrap.com/angular/components/inputs/ I am trying to isolate the issue.

sdhakad pro commented 4 years ago

simple input works but mdb-select not work.

manimurugan free commented 4 years ago

@Dawid Adach When we use keyboard filter that options that is not working. This is basic selectbox properties. I there are more than 100 option is there mean that must need to suuport keyboard type filter

Dawid Adach pro commented 4 years ago

Dear sdhakad, please check following code: <pre> <div class="md-form"> <label class="active" for="gender">Gender</label> <mdb-select [options]="optionsSelect" id="gender" name="gender" placeholder="Choose your option" class="form-control" ></mdb-select> </div></pre> @manimurugan, currently we do not support key filtering, we will add it to our ideas.


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

  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes
Tags