style flex not working

UI Components for Angular
Post Reply
renegama
Posts: 1
Joined: 02 Feb 2023, 03:13

02 Feb 2023, 05:01

Hi,

I have p-table width styling like this:

Code: Select all

    <tr>
      <th style="flex: auto">Company</th>
      <th style="flex: 0 0 100px">Name</th>
      <th style="flex: 0 0 100px">Country</th>
      <th style="flex: 0 0 80px">&nbsp;</th>
    </tr>
But after libraries update it does not take the widths anymore. I had this in the package.json

Code: Select all

  "dependencies": {
    "@angular/animations": "~13.0.0",
    "@angular/cdk": "^13.2.5",
    "@angular/common": "~13.0.0",
    "@angular/compiler": "~13.0.0",
    "@angular/core": "~13.0.0",
    "@angular/forms": "~13.0.0",
    "@angular/platform-browser": "~13.0.0",
    "@angular/platform-browser-dynamic": "~13.0.0",
    "@angular/router": "~13.0.0",
    "file-saver": "^2.0.5",
    "primeflex": "^3.1.2",
    "primeicons": "^5.0.0",
    "primeng": "^13.1.0",
    "rxjs": "~7.4.0",
    "sha.js": "^2.4.11",
    "tslib": "^2.3.0",
    "uuid": "^8.3.2",
    "xlsx": "^0.18.2",
    "zone.js": "~0.11.4"
  }
And now I have this:

Code: Select all

  "dependencies": {
    "@angular/animations": "^15.1.2",
    "@angular/cdk": "^15.1.2",
    "@angular/common": "^15.1.2",
    "@angular/compiler": "^15.1.2",
    "@angular/core": "^15.1.2",
    "@angular/forms": "^15.1.2",
    "@angular/platform-browser": "^15.1.2",
    "@angular/platform-browser-dynamic": "^15.1.2",
    "@angular/router": "^15.1.2",
    "file-saver": "^2.0.5",
    "primeflex": "^3.1.2",
    "primeicons": "^6.0.1",
    "primeng": "^15.1.1",
    "rxjs": "~7.8.0",
    "sha.js": "^2.4.11",
    "tslib": "^2.3.0",
    "uuid": "^8.3.2",
    "xlsx": "^0.18.2",
    "zone.js": "~0.11.4"
  }
I found a old example in viewtopic.php?f=35&t=52355 that has this style:

Code: Select all

[style]="{width: '300px'}
And it works... more or less. The issue is that if I want to have four cells where three of them have a fixed size in 'px' and want the first one to use the remaining space it is taking ALL space. I mean, is I do this to "emulate" the code with the 'flex' style:

Code: Select all

    <tr>
      <th>Company</th>
      <th [style]="{ width: '100px' }">Name</th>
      <th [style]="{ width: '100px' }">Country</th>
      <th [style]="{ width: '100px' }">&nbsp;</th>
    </tr>
But the first cell is taking all space like a [style]="{ width: '100%' }" instead of using the remaining space.

What would be the instruction to simulate the flex style or what is missing now after update?

Thanks

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 8 guests