Topic: mdb-select not aligning within form group
<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?
.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 thematerial select input field correctly. Thanks for stopping by! :)
With Best Regards,
Kuba
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 themd-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 yourmdb-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 wasprefix). Any other recommendations?
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: Yes
Bartłomiej Malanowski staff pro premium 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