Float label with multiselect and placeholder not is not showing properly

[quartelh]

Hi,

I am using float labels for my app. ALl works well, except for float labels in combination with multiselect and supplying a placeholder.

If using a dropdown with a placeholder then the label is positioned above the placeholder, but in case of a multiselect the label is written over the placeholder.


I tried to make an example here (https://stackblitz.com/edit/github-m6qfs4) , but since serenitiy is not used in that stackblitz it is not showing correct at all.
I do hope the code at least provides the starting point.


Best regards,
Herbert

[cetincakiroglu]

Hi,

Thanks for your report, we'll check and get back to you.

Regards

[cetincakiroglu]

Hi,

Here is a workaround for Serenity, you can use the style rules below to make it work as you want.
PS: you may need to change .p-multiselect selector from styles depending on which input component will be used.

Code: Select all

        :host ::ng-deep .p-multiselect{
            .p-multiselect-label {
                &.p-placeholder {
                    visibility: hidden;
                }
            }

            &.p-multiselect-open {
                .p-multiselect-label {
                    &.p-placeholder {
                        visibility: visible;
                    }
                }
            }
        }

And here is how it looks with the code above.
https://ibb.co/Msfq86F

Regards