PrimeNG DropDown remove automaticaly consecutives spaces

Question

I got a little problem on the PrimeNG DropDown element. In the labels, consecutives spaces are changed to only 1 space.

Example :

 this.test = [
        { label: 'test     test', value: true },
        { label: 'test         test', value: false }
 ];

And HTML :

<p-dropdown name="testdropdown" placeholder="&nbsp;" filter="true" [options]="test"></p-dropdown>

Result in :

Do you have sa solution for this ? Thanks for your time.

Answer 1

As per the given link by @Yashwardhan. I created this. As per your requirement you will have to use custom dropdown. Directly if you put space it will not work.

<p-dropdown [options]="cars" [(ngModel)]="selectedCar2" [style]="{'width':'300px'}" filter="true">
        <ng-template let-car pTemplate="item">
            <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                <div style="width:100px;position:absolute;top:1px;left:5px">{{car.label}}</div>
                <div style="font-size:14px;float:right;margin-top:4px">{{car.label}}</div>
            </div>
        </ng-template>
    </p-dropdown>

In component.ts:

this.cars = [
      {label: 'Audi', value: 'Audi'},
      {label: 'BMW', value: 'BMW'},
      {label: 'Fiat', value: 'Fiat'},
      {label: 'Ford', value: 'Ford'}
  ];

Answer 2

@YashwardhanPauranik you were right I had to use template.

@DirtyMind I think I understand what you wanted to do but I didn't want to work too much with positioning with CSS.

The solution was :

<p-dropdown name="testdropdown" placeholder="&nbsp;" filter="true" [options]="tests" style>
    <ng-template let-test pTemplate="item">
        <div>
           <div style="white-space: pre;">{{test.label}}</div>
        </div>
     </ng-template>
</p-dropdown>

Yep the solution was just one CSS style with the use of ng-template...

Thanks all !