picklist styling broken after upgrading from 9 to 11

UI Components for Angular
Post Reply
hikizume976
Posts: 4
Joined: 20 Apr 2021, 12:17

20 Apr 2021, 12:23

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>
Last edited by hikizume976 on 22 Apr 2021, 17:06, edited 1 time in total.

PhilHuhn
Posts: 93
Joined: 19 Sep 2018, 02:52
Location: Ann Arbor, Michigan USA
Contact:

22 Apr 2021, 16:57

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.

hikizume976
Posts: 4
Joined: 20 Apr 2021, 12:17

22 Apr 2021, 17:09

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

PhilHuhn
Posts: 93
Joined: 19 Sep 2018, 02:52
Location: Ann Arbor, Michigan USA
Contact:

22 Apr 2021, 18:06

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'},
    ];
  }
}

hikizume976
Posts: 4
Joined: 20 Apr 2021, 12:17

22 Apr 2021, 18:30

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

PhilHuhn
Posts: 93
Joined: 19 Sep 2018, 02:52
Location: Ann Arbor, Michigan USA
Contact:

23 Apr 2021, 02:41

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.

hikizume976
Posts: 4
Joined: 20 Apr 2021, 12:17

23 Apr 2021, 11:11

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

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 6 guests