How to fit p-dropdown inside of a table cell?

javascript html css angular primeng

11,223

Solution 1

inside the p-dropdown component there is a class .ui-dropdown this set the min-width to fixed values 12.5em; so if you set the min-width to 0 or initial will solve the problem

style.scss

.base-table { 
  p-dropdown {
    .ui-dropdown {
      min-width:0;
    }
  }
}

or like this will reset the min-width for p-dropdown component in the all project

 p-dropdown {
    .ui-dropdown {
      min-width:0; // auto , initial 😀
    }
  }

demo 🔥🔥

Solution 2

You can add min-width:100% to p-dropdown element :

<p-dropdown [style]="{'width':'100%','min-width':'100%'}" *ngSwitchCase="'invoice_status'" [options]="statuses" [autoWidth]="true"></p-dropdown>

Solution 3

Use this it might solve your problem

  <p-dropdown *ngSwitchCase="'status'" [options]="order_status" [style]="{ width: '100%', overflow: 'visible' }" appendTo="body"
          (onChange)="dt.filter($event.value, retailer.field, 'equals')"></p-dropdown>

Solution 4

If someone comes in handy I will be glad:

p-table {
  ::ng-deep p-dropdown {
    .ui-dropdown {
      min-width: 0;
    }
  }
}

View more solutions

11,223

Author by

TyCox94

12 year old me created bad coding habits… please help

Updated on July 16, 2022

Comments

TyCox94 almost 2 years
I'm adding p-dropdown to a p-table similar to what is seen here: https://www.primefaces.org/primeng/#/table/filter

The p-dropdown is overflowing into the next cell. How can I prevent p-dropdown from flow to the next cell?

I have tried the following:
- adding [style]="{'width':'100%'}" to p-dropdown element
- adding [autoWidth]="true" to the p-dropdown element
- adding max-width to the p-dropdown element
```
<p-table [columns]="cols" [value]="wfdata" [paginator]="true" [rows]="10">
```
...
```
<th *ngFor="let col of cols" [ngSwitch]="col.value">
          <p-dropdown *ngSwitchCase="'invoice_status'" 
                    [options]="statuses" 
                    [autoWidth]="true"
                    [style]="{'width':'100%'}"></p-dropdown>
```
...
```
</p-table>
```
TyCox94 about 5 years

Adding the overflow visible and appendto body resulted in the same way - it is still overflowing into the next cell :(
TyCox94 about 5 years

<p-dropdown *ngSwitchCase="'invoice_status'" [options]="statuses" [style]="{ width: '100%', overflow: 'visible' }" appendTo="body"></p-dropdown>
MahanteshGowda Patil about 5 years

Can you create a StackBlitz please ?
Mark over 4 years

Even if this solved the problem - which it didn't for me, but apparently for @TyCox94, as he marked this as the correct answer - it would be nice if you could explain why instead of just giving a piece of code that 'might' solve the problem.
Muhammed Albarmavi over 4 years

also this will work the main problem is the defual value was 12.5em so relevent or 0 will fix the problem 😐😐
R.A over 4 years

Please explain your snipet, is it a question? a solution?
Сергей Барабанов over 4 years

@R.S it`s solution
Daniel Tate almost 3 years

You should read this: stackoverflow.com/help/minimal-reproducible-example