primeng dropdown label width

Question

I use a primeng dropdown input and I want to make the div that holds the label placeholder to have 100% width.
Here is how I use it:

<div class="ui-grid ui-grid-responsive ui-fluid">
    <div class="ui-grid-row">
        <div class="ui-grid-col-2">
            <p-dropdown [options]="solutionsDropDownData" [(ngModel)]="solutionDropDownValue" placeholder="Solution..."
                [filter]="true" (onChange)="onSolutionChange($event)">
            </p-dropdown>
        </div>
    </div>
</div>

The problem is that I get a space after the placeholder while I want the placeholder to be full width. The space can be seen below:

When I choose an other value, with smaller length for example, the width of the space changes, it becomes bigger if I used the same example.

I already tried this approaches, but none of them worked:

1. used autoWidth parameter, but this one gives me Can't bind to 'autoWidth' since it isn't a known property of 'p-dropdown'. error if I use it with brackets; the error disappears if I use it without brackets, but it doesn't work (I mention that I imported the DropdownModule);

2. used css classes like below (I used them separately and both, alternatively):

   .ui-dropdown-label-container{ width:100% !important; }

   .ui-dropdown .ui-dropdown-panel { min-width: 100% !important; width: max-content; }

3. used style parameter.

Answer 1

I managed to solve this by adding the code below:

Basically, I just added the dropdown inside a div and changed the background color of the div that's containing it.

Answer 2

It happens because of the stylesheet you using for PrimeNG. We experienced same visual problem and achieved that by adding below css class to styles.css

.ui-dropdown .ui-dropdown-label-container {
    width: inherit !important;
}

Actually inherit calls for 100%, I couldn't understand why it didn't work for you.