mdb-select not aligning within form group

Topic: mdb-select not aligning within form group

TeoDaTank pro asked 7 years ago

https://imgur.com/a/jAayx I'm trying out a barebones mdb-form to see how I like it, and I have a basic HTML Output suck as:

<form (ngSubmit)="onSubmit()">
 <p class="h5 text-center mb-4">New Task</p>
 {{diagnostic}}
 <div class="md-form">
 <i class="fa fa-user prefix grey-text"></i>
 <input type="text" id="title" class="form-control" [(ngModel)]="newTask.title" mdbActive name="title">
 <label for="title">Task Title</label>
 </div>

 <div class="md-form">
 <i class="fa fa-envelope prefix grey-text"></i>
 <input type="text" id="description" class="form-control" [(ngModel)]="newTask.description" mdbActive name="description">
 <label for="description">Task Desc.</label>
 </div>

 <div class="md-form pb-3">
 <i class="fa fa-envelope prefix grey-text"></i>
 <mdb-select id="category" name="category" [options]="categorySelect" placeholder="Choose your option" [(ngModel)]="newTask.category"></mdb-select>
 <label for="category">Category</label>
 </div>

 <div class="text-center">
 <button class="btn btn-indigo waves-light" mdbRippleRadius>Send <i class="fa fa-paper-plane-o ml-1"></i></button>
 </div>

</form>

However, the alignment is incorrect in everything. I've tried the row/col-md-6 wrapper that it recommends, which gets it to a nicer size but my label is still not looking how it should, at all. Is there an issue within how I am tying the model that breaks the CSS it applies?

Bartłomiej Malanowski staff commented 7 years ago

Could you please provide us a live demo of your issue? I've tried to recreate this issue, but no luck

Add comment

ashleyww93 free answered 7 years ago

1 0 Best answer

Hi. I had this issue as well, the correct way to style this for me was to add the following css:

.md-form .prefix ~ select {
 margin-left: 3rem;
 width: 92%;
 width: -webkit-calc(100% - 3rem);
 width: calc(100% - 3rem);
}

Jakub Strebeyko staff commented 7 years ago

Hello there ashleyww93, Your suggestion surely styles the material select input field correctly. Thanks for stopping by! :) With Best Regards, Kuba

Add comment

Jakub Strebeyko staff answered 7 years ago

0 0 Best answer

Please insert min. 20 characters.

Hi TeoDaTank,

To prevent the select fields from spilling over the entire width of the parent I suggest applying some of our spacing utilities or simply fiddling with the width attribute of your select. When it comes to the icon, some of its styling features are indeed dependent on it being encompassed by a .md-form. To overcome it, you can either consider putting it inside a little div doing just that or, again, applying the missing features through style attriubte (i.e. style="font-size: 1.5rem; margin-top: 1rem; transition: color 0.2s; width: 3rem; padding-top: .5rem;").
Hope it helps.

Best Regards,
Kuba

Add comment

Jakub Strebeyko staff answered 7 years ago

0 0 Best answer

Hi TreoDaTank, Thanks for reaching out. Please correct me if I'm wrong: you wrote that "the alignment is incorrect in everything", but judging from the attached picture there is something wrong with mdb-select only. If that's the case, I'm happy to inform you on what you're certainly not missing - the extra "md-form" CSS-classed div you're wrapping your material select with that's breaking up your styling. With Best Regards, Kuba

TeoDaTank pro commented 7 years ago

Hey @Jakub - Thanks for the reply. Do you mean the `md-form` on the itself? Should it not have one? When I try it without it just shifts to the left and bypasses the style entirely.

Jakub Strebeyko staff commented 7 years ago

Hi TreoDaTank, I am not sure what you mean by "'md-form' on the itself" – I'm referencing the div surrounding your mdb-select element. Its md-form CSS class conflicts with material select styled features. In case you are unsure of how to use mdb-select Angular component properly, feel free to refer to our official documentation. With Regards, Kuba

TeoDaTank pro commented 7 years ago

Hey @Jakub - If you remove md-form, it expands all the way side-to-side. https://imgur.com/a/LA8CF for demo. This could be a class I'm missing - I think in bs4 there was a class to say 'icon in front of the form-field'.(I thought this was `prefix`). Any other recommendations?

Add comment

TeoDaTank pro answered 7 years ago

0 0 Best answer