Page 1 of 1

picklist styling broken after upgrading from 9 to 11

Posted: 20 Apr 2021, 12:23
by hikizume976
I've just upgraded primeng on my app from 9 to 11. Went through the migration guide, changed the imports, changed the classes from u to p, etc. Everything looks fine for the most part, except for the pick list.

this is what I have

Code: Select all

<p-pickList [source]="data" [target]="selectedItems" filterBy="value">
  <ng-template let-item pTemplate="item">              
    <div>
      <div >{{ item.value }}
      </div>
    </div>
  </ng-template>
</p-pickList>

Re: picklist styling broken after upgrading from 9 to 11

Posted: 22 Apr 2021, 16:57
by PhilHuhn
Hey, I searched for the p-helper-clearfix class and could not find it in my Angular 11 application. So p-helper-clearfix does not seem to exist. Per the 9 documentation:

Name Element
ui-picklist Container element.
ui-picklist-source-controls Container of source list buttons.
ui-picklist-target-controls Container of target list buttons.
ui-picklist-buttons Container of buttons.
ui-picklist-listwrapper Parent of a list element.
ui-picklist-list List element.
ui-picklist-item An item in the list.

New classes:

Name Element
p-picklist Container element.
p-picklist-source-controls Container of source list buttons.
p-picklist-target-controls Container of target list buttons.
p-picklist-buttons Container of buttons.
p-picklist-list List element.
p-picklist-item An item in the list.

In general, it seem to me that they moved from block to flex. I actually decided to use bootstrap-grid as my general styling. Obviously, I am using their control styling. We shall see if using bootstrap was the correct decision. So far it has been OK.

Re: picklist styling broken after upgrading from 9 to 11

Posted: 22 Apr 2021, 17:09
by hikizume976
Hey Phil,

thanks for the reply.

You're right, that class was there from the implementation of the previous version. I've edited the post to reflect what I currently have more accurately.

thanks

Re: picklist styling broken after upgrading from 9 to 11

Posted: 22 Apr 2021, 18:06
by PhilHuhn
So, what is the problem? What does it look like? I used the pick-list StackBlitz, with your HTML and the following code and it looked great.

Code: Select all

import { Component } from '@angular/core';
import { SelectItem } from 'primeng/api';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent { 
  //
  selectedItems: SelectItem[] = [];
  data: SelectItem[] = [];
  constructor() { }
  ngOnInit() {
    this.data = [
      {label: 'One (1)', value: 'One'},
      {label: 'Two (2)', value: 'Two'},
      {label: 'Three (3)', value: 'Three'},
      {label: 'Four (4)', value: 'Four'},
      {label: 'Five (5)', value: 'Five'},
    ];
  }
}

Re: picklist styling broken after upgrading from 9 to 11

Posted: 22 Apr 2021, 18:30
by hikizume976
the problem is that before the upgrade it used to look like this

Image

And now it looks like this

Image

Instead of keeping a fixed size and automatically adding the horizontal scrollbar like on v9, after the upgrade the two columns are shrinking/expanding depending on the content, which is not the case on the example on the website and wasn't the behaviour before the upgrade either.

thanks

Re: picklist styling broken after upgrading from 9 to 11

Posted: 23 Apr 2021, 02:41
by PhilHuhn
Try:

Code: Select all

<p-pickList [source]="data" [target]="selectedItems" filterBy="value" [style]='{width: "600px"}'>
  <ng-template let-item pTemplate="item">              
    <div>
      <div >{{ item.value }}
      </div>
    </div>
  </ng-template>
</p-pickList>
The 600px is the total length. You can do a similar thing with a style class.

Re: picklist styling broken after upgrading from 9 to 11

Posted: 23 Apr 2021, 11:11
by hikizume976
thanks for that

unfortunately the width of box boxes continue to shrink/expand depending on the values, as opposed to the previous behaviour where it displayed a horizontal scrollbar if the string is too long