eakoriakin / ionic-selectable

Ionic Selectable is an Ionic versatile and highly customizable component that serves as a replacement to Ionic Select, and allows to search items, including async search, create items, customize the layout with templates and much more. It provides an intuitive API and is easy to set up and use.
MIT License
549 stars 125 forks source link

Item values exceeds input-box #384

Open alexismpro opened 2 years ago

alexismpro commented 2 years ago

Issue description

When using the style "outline" (from Ionic) for an ion-item containing an ionic-selectable (with multiple selections enabled and the Multiple values with ellipsis template), the values exceeds from the box borders.

Versions

Stackblitz example

* Currently not working...

Error in /turbo_modules/@angular/core@13.2.7/fesm2015/core.mjs (1150:15) Type L does not have 'ɵmod' property.

Seems to be coming from this import: import { IonicModule } from '@ionic/angular';

Had to update imports versions because otherwise the fill="outline" style wouldn't exist. But these new imports have caused the problem.

Anyway, all the code and dependencies are in here: https://stackblitz.com/edit/ionic-selectable-grouping-ab49zt?file=app/pages/home/home.html

Code to reproduce

            <ion-item fill="outline">
                    <ion-label position="floating">{{"students" | translate}}</ion-label>
                    <ionic-selectable item-content [(ngModel)]="selectedstudents" [items]="students" itemValueField="id" temTextField="name" [isMultiple]="true" [canClear]="true">
                            <ng-template ionicSelectableValueTemplate let-students="value">
                                    <div class="ionic-selectable-value-item">
                                            {{formatMultipleValues(students)}}
                                    </div>
                            </ng-template>
                    </ionic-selectable>
            </ion-item>