Material select label is not same as on Material-input

web
mobile

Topic: Material select label is not same as on Material-input

Custer pro premium asked 4 months ago

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.


Marta Szymanska staff pro premium answered 3 months ago

Hi,

thank you for noticing this problem, we will fix this as soon as possible.

Best, Marta


Custer pro premium answered 2 months ago

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.


Marta Szymanska staff pro premium answered 2 months ago

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 pro premium commented 1 months 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 pro premium commented 1 months 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 pro premium commented 1 months ago

You can't use empty option tags in the first place anymore.


Marta Szymanska staff pro premium commented 1 months ago

Hi,

thank you @lemons for your help. Do you need more help @Custer?

Best, Marta


Custer pro premium commented 1 months 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 pro premium commented 1 months 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 pro premium commented 1 months 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 pro premium commented 1 months 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 Szymanska staff pro premium commented 1 months 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 pro premium commented 1 months 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


Please insert min. 20 characters.