How to make list width adaptive data length in the list

[DaLiangLee]

trafficstars

How to make list width adaptive data length in the list

[DaLiangLee]

[DaLiangLee]

I know that overriding the css style is a way, but the css class name will change... thanks for your reply

[DaLiangLee]

...I hope to get your help..

[optimistex]

Override the css. The ngx-select__... classes I'll not change.

[DaLiangLee]

width: 100%.... how to override....

[optimistex]

width: auto !important;

[DaLiangLee]

thanks...

[DaLiangLee]

.ngx-select__choices[_ngcontent-c8] / .ngx-select__choices[_ngcontent-c7] / but it can change...

[optimistex]

Make the CSS:

.ngx-select__choices {
   width: auto !important;
}

It have to overrides the style.

And... Make it out of a component. Or make it with /deep/, but it is deprecated now: https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

[DaLiangLee]

Successfully solved with your help, thanks

[DaLiangLee]

I have a new question... Before using angular pipe to remove the leading zero in the data.. but now, i don't know how to remove leading zero. Thank you in advance for your reply

[optimistex]

@DaLiangLee I do not understand. Show your code.

[DaLiangLee]

<div class="form-group"> <label>Delivery</label> <select class="form-control" (change)="saveSelectedFilter(list,'deliveryOrderId',deliveryOrderId)" [(ngModel)]="deliveryOrderId" name="deliveryOrderId"> <option *ngFor="let item of deliveryOrderIDs" value="{{item.value}}"> {{item.text|removeLeadingZeros}} </option> </select> </div>

[DaLiangLee]

`

                <label>Delivery</label>
                <select class="form-control" 
                    (change)="saveSelectedFilter(list,'deliveryOrderId',deliveryOrderId)" 
                     [(ngModel)]="deliveryOrderId" name="deliveryOrderId">
                    <option *ngFor="let item of deliveryOrderIDs" value="{{item.value}}">
                        {{item.text|removeLeadingZeros}}
                    </option>
                </select>
            </div>`

[optimistex]

Try the templates: https://github.com/optimistex/ngx-select-ex#templates

[DaLiangLee]

Thanks a lot.