sass – primeng dropdown label width


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:
white space width after placeholder 1

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.
white space width after placeholder 2

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.