Multiselect Filter Input Misalignment

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
TestingABC
Posts: 3
Joined: 08 Sep 2021, 12:52

08 Sep 2021, 13:21

Code: Select all

<h5>Multiselect</h5>
            <span class="p-float-label">
                <p-multiSelect class="p-float-label"[options]="countries" [(ngModel)]="selectedMulti" optionLabel="name" [filter]="true"></p-multiSelect>
                <label>Select a country</label>
            </span>
Image

Upon changing filter="true" in p-multiselect, the textinput portion doesn't align with the Checkbox.
Can this issue be fixed? In the original live demo for Ultima, the multiselect filter option is disabled.

merve7
Posts: 861
Joined: 12 Sep 2017, 10:44

08 Sep 2021, 14:50

Hi,

We will fix the next release but you can add the below code to in your stylesheet or _theme_styles file in the assets/sass/overrides folder until the release;

Code: Select all

body {
    .p-input-filled {
        .p-multiselect-panel {
            .p-multiselect-header {
                .p-multiselect-filter-container {
                    .p-inputtext {
                        padding-top: .25rem;
                    }
                }
            }

        }
    }
}
Best regards,
Merve Özçifçi

TestingABC
Posts: 3
Joined: 08 Sep 2021, 12:52

09 Sep 2021, 06:22

Hi, the overrides are still not applying any changes to the themes in this directory: assets\sass\overrides\_theme_styles.scss

For changes to happen, I had to change an individual's css file. It works but not ideal since updates might affect this configuration:

Code: Select all

.p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
  padding-top: 0.25rem;
  padding-right: 1.75rem;
}
However, the moment I switch from Light to Dark and back to Light again, this occurs:
Image
The inputtext is misaligned due to the new config and the textbox border suddenly appears. Anyway to make both functions consistent?

merve7
Posts: 861
Joined: 12 Sep 2017, 10:44

13 Sep 2021, 14:57

Hi,
You need to add .p-input-filled class because there are different input style (outlined and filled).

Post Reply

Return to “Ultima - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests