Float label with multiselect and placeholder not is not showing properly

Post Reply
quartelh
Posts: 12
Joined: 09 Oct 2018, 11:33

20 Apr 2022, 16:38

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
Posts: 65
Joined: 17 Dec 2021, 09:33

29 Apr 2022, 11:13

Hi,

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

Regards

cetincakiroglu
Posts: 65
Joined: 17 Dec 2021, 09:33

29 Apr 2022, 11:24

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

Post Reply

Return to “Serenity - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests