Hi to all,
the p-multiselect componet seems to have problem on the width both with chips or elipsis.
The width increases without any control and there is no way to limit it.
In the doc page it's working, but in the stackblitz (for example) it is not working!
p-multiselect width
Hey:
You could try panelStyle:
Alternately, this is the CSS from the Stackblitz example:
You could try panelStyle:
Code: Select all
<p-multiSelect [options]="cities" [(ngModel)]="selectedCities1"
defaultLabel="Select a City" optionLabel="name"
[panelStyle]="{'width':'400px'}">
</p-multiSelect>
Code: Select all
:host ::ng-deep .p-multiselect {
min-width: 15rem;
}
:host ::ng-deep .multiselect-custom-virtual-scroll .p-multiselect {
min-width: 20rem;
}
:host ::ng-deep .multiselect-custom {
.p-multiselect-label {
padding-top: .25rem;
padding-bottom: .25rem;
}
.country-item-value {
padding: .25rem .5rem;
border-radius: 3px;
display: inline-flex;
margin-right: .5rem;
background-color: var(--primary-color);
color: var(--primary-color-text);
img.flag {
width: 17px;
}
}
.country-placeholder {
padding: 0.25rem;
}
}
-
- Posts: 3
- Joined: 01 Jun 2021, 16:53
I've tried both solutions and they don't work. When I select some elements the width grows out of control.
The same behavior is achieved in stackblitz when selecting some elements
The same behavior is achieved in stackblitz when selecting some elements
Hey:
I don't know what you mean by grow out of control.
If you want the panel and the input the same size then you apply that to [style] and follows:
I don't know what you mean by grow out of control.
If you want the panel and the input the same size then you apply that to [style] and follows:
Code: Select all
<p-multiSelect [options]="cities" [(ngModel)]="selectedCities1"
defaultLabel="Select a City" optionLabel="name"
[style]="{'width':'400px'}"
[panelStyle]="{'width':'400px'}">
</p-multiSelect>
Hey:
Alternately, you can constrain it into a div as follows:
Alternately, you can constrain it into a div as follows:
Code: Select all
<div style='width: 400px;'>
<p-multiSelect [options]="cities" [(ngModel)]="selectedCities1"
defaultLabel="Select a City" optionLabel="name"
[style]="{'width':'100%'}"
[panelStyle]="{'width':'100%'}">
</p-multiSelect>
</div>
-
- Posts: 2
- Joined: 02 Oct 2020, 14:50
we limit the display with maxSelectedLabel to avoid the mess. and you can use show tooltip or overlay for selected values
-
- Information
-
Who is online
Users browsing this forum: No registered users and 9 guests