Topic: Material select label is not same as on Material-input
Expected behavior
The label for the material-select should be on the same line (if there is no value chosen) as on the material-inputs.
Actual behavior
The label is directly on the line and not centered. It looks a bit ugly.
Resources (screenshots, code snippets etc.) https://mdbootstrap.com/snippets/jquery/custer/1414821
In other versions it was fine. I don't know which version changed it like that.
Hi,
please check out my snippet: https://mdbootstrap.com/snippets/jquery/marta-szymanska/1582791?view=side#css-tab-view material select look fine for me now, if you don't like our default styles you can add some CSS, like in my snippet in the CSS section.
Best, Marta
Custer priority commented 4 years ago
Yes yours looks good, because you already have chosen an option. But if the option is empty and the label is on the line, it doesn't look correctly. If you look at my snippet and you change the version to 4.8.9 then you will see the difference. Is there any workaround?
Custer priority commented 4 years ago
Here you can see the two snippets in different version. The first one is fine, and the second one is bad:
First:https://mdbootstrap.com/snippets/jquery/custer/1651338
Second:https://mdbootstrap.com/snippets/jquery/custer/1414821
lemons free commented 4 years ago
You can't use empty option tags in the first place anymore.
Marta Wierzbicka staff commented 4 years ago
Hi,
thank you @lemons for your help. Do you need more help @Custer?
Best, Marta
Custer priority commented 4 years ago
That means you did that intentionally, that it‘s not possible to use empty option tags? Why is this not possible anymore? What‘s the sense behind that?
lemons free commented 4 years ago
I don't know if this was intentionally as I am a user only too. but actually I don't see any sense in an empty option.
Custer priority commented 4 years ago
There is a sense for an empty option. If the select is an optional part of the form. Because if you chose an option, you can not go back to the empty value. That means it submits a value, even if you don‘t want to.
Custer priority commented 4 years ago
@Marta Szymanska Sry but what is the sense of the material design, label moving in and out the field, if the field should never be empty, because it looks ugly?! Sry this is no explanation for me. It‘s just a design mistake and you should fix that. In the older version it looked great and the label moved as expected. That‘s really not an acceptable answer.
Marta Wierzbicka staff commented 4 years ago
Hi,
our team will look at this problem, but for now, I can offer you this solution: https://mdbootstrap.com/snippets/jquery/marta-szymanska/1664605?view=side#css-tab-view.
Best, Marta
Custer priority commented 4 years ago
Hi Marta Thank you very much for the solution. Now it looks like it has to look ;) I hope it will be fixed regulary with new versions.
Best regards
Custer
Even in the newest version the material-select looks that ugly. Could you please fix that? I can't use mdbootstrap as long as it look that bad. In version 4.8.9 it was fine.
Thank you.
Hi,
thank you for noticing this problem, we will fix this as soon as possible.
Best, Marta
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB jQuery
- MDB Version: 4.9.0
- Device: Computer
- Browser: Chrome (newest)
- OS: Windows 10 (1903)
- Provided sample code: No
- Provided link: Yes