1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: mdb-select not rendering properly in a multi-column reactive form

Shajee Lawrence pro asked 7 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  

Arkadiusz Idzikowski staff answered 7 years ago

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

Shajee Lawrence pro answered 7 years ago

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.

Arkadiusz Idzikowski staff answered 7 years ago

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

Shajee Lawrence pro answered 7 years ago

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

Damian Gemza staff answered 7 years ago

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

Shajee Lawrence pro answered 7 years ago

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.

Damian Gemza staff answered 7 years ago

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
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Resolved

Specification of the issue
  • ForumUser: 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
Tags
mdb-select reactive-form
About author
Shajee Lawrence
Pro User 50Support score
2Questions 4Answers 0Snippets