mdb-select not rendering properly in a multi-column reactive

Topic: mdb-select not rendering properly in a multi-column reactive form

Shajee Lawrence pro asked 6 years ago

<form [formGroup]="artistForm" (ngSubmit)="onSubmit()" novalidate autocomplete="off"> <div class="form-row"> <div class="col"> <div class="md-form mt-0"> <input mdbInputDirective type="text" id="name" data-error="Enter value for Name" class="form-control" [validateSuccess]="false" formControlName="name"> <label for="name">*Name</label> </div> </div> <div class="col"> <div class="md-form mt-0"> <input mdbInputDirective type="text" id="age" data-error="Enter value for age" class="form-control" [validateSuccess]="false" formControlName="age"> <label for="age">*Age</label> </div> </div> </div> <div class="form-row"> <div class="col"> <div class="md-form mt-0"> <input mdbInputDirective type="text" id="yearsActive" data-error="Enter value for Name" class="form-control" [validateSuccess]="false" formControlName="yearsActive"> <label for="name">*Years Active</label> </div> </div> <div class="col mt-0"> <div class="md-form mt-0"> <mdb-select [options]="genreOptions" id="genre" placeholder="Genre" formControlName="genre" name="genre"> </mdb-select> </div> </div> </div> <button mdbBtn mdbWavesEffect color="secondary" block="true" class="my-4" type="submit">Sign up</button> </form> Follow link below Image and code

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Dear Shajee Lawrence, I have tried to reproduce your problem with the code which you have provided but without success. Please check the screenshots which I have posted below. I don't know how to reproduce this overlapped placeholder within mdb-select element. If you want to align mdb-select with other inputs in one line, please add the below scss code to your styles.scss stylesheet:

mdb-select > div > div.single {

padding: 0;

}

First link - after rendering the view: https://screenshots.firefox.com/fq3gLW6Mn3byGxSc/localhost

Second link - after filling the form with some data: https://screenshots.firefox.com/QcaOtkY2aUSjj1SO/localhost

Best Regards, Damian

Add comment

Shajee Lawrence pro answered 6 years ago

0 0 Best answer

HI Damian, Thanks for responding. The alignment probelm solves through the scss by providing padding:0. In your screenshot you have set 'Genre' as the placeholder text for the mdb-select. Try setting a <label> for the select and you will be able to reproduce my problem. The lable for the select control is a absolute must - otherwise people will not know what that value is. Would appreciate if can give a work around for this.

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Dear Shajee, Remove mdb-select wrapper which contains .md-form class, and everything should be okay. Best Regards, Damian

Add comment

Shajee Lawrence pro answered 6 years ago

0 0 Best answer

Damian, Thanks again for the response. If I remove the .md-form class, then the alignment is not proper when the select component is rendered. But, after selection, it looks good.

 <div class="col">
     <div class="mt-0 mb-0">
        <mdb-select [options]="genreOptions" id="genre"  data-error="Select Genre"
                    formControlName="genre" name="genre"
                    class="colorful-select dropdown-primary">
        </mdb-select>
        <label for="genre">Genre</label>
     </div>
 </div>

Styles.scss
mdb-select > div > div.single {
 padding: 0;
}

Screenshots below
Initial rendering
Rendering after a Selection

Add comment

Arkadiusz Idzikowski staff answered 6 years ago

0 0 Best answer

Dear Shajee, It looks like there are some problems with label. We will take a closer look at it, thank you for all the information. Regards, Arek

Add comment

Shajee Lawrence pro answered 6 years ago

0 0 Best answer

Thank you Arek, would appreciate if you could let me know when the fix is ready. I need to implement this in my project soon.

Add comment

Arkadiusz Idzikowski staff answered 6 years ago

0 0 Best answer

Dear Shajee, This problem will be fixed in new version of MDB Angular (probably November 5). For now you could add those styles to resolve problem with the alignment when there is no placeholder/selected option (please remember to remove md-form wrapper). SCSS:

mdb-select > div > div.single {

padding: 0;

height: 38px;

}

HTML:

<div class="mt-0">

<mdb-select [options]="optionsSelect"id="genre"

formControlName="testSelect"name="genre">

</mdb-select>

<label>Example label</label>

</div>

Regards, Arek

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

User: Pro
Premium support: No
Technology: MDB Angular
MDB Version: 6.2.3
Device: PC
Browser: Chrome, fireFox
OS: Linux
Provided sample code: No
Provided link: Yes

Shajee Lawrence

Pro User

50Support score
2Questions 4Answers

0Snippets likes 0Snippets