.css width value makes ngu-item render VERY wide

[Jay-PC]

I have everything working. Then I wanted to add my items. I am putting in Angular 6 Material Cards, and inside those, I am putting in iFrames for videos. for the HTML, I have

<ngu-item class="vid-item" NguCarouselItem *ngFor="let Slide of Slides; let i = index">

form my class, I have...

.vid-item {
    height: 266px;
    width: 45vw;
    background:green;
    align-items: center;
    justify-content: center;
    display: flex;

I set the background green so I could tell what was happening. The ngu-item became a huge green banner behind the one visible slide. The width of the huge green banner was about the width of all 5 of the slides loaded in the *ngFor set side-by-side.

It doesn't seem to have this issue when I populate with just text... until I add a .css width to the text block, and then the same things happens. Is this a bug, or do I have something configured incorrectly?

UPDATE: when I strip the down to a simple, empty card, in Microsoft Edge the green ngu-item looks to be exactly five tiles wide with one tile visible in the middle of it. Almost like it's loading all 5 tiles and then hoping I don't put a background color on it. However, in Firefox and Chrome, the same green ngu-item stretches WAY beyond 100vw (like nearly double the width of the browser, which adds an unnecessary scrollbar on the bottom of the screen even when I don't add a background color. This is the bug I am trying to fix... to keep the bottom scroll popping up and the page having a big blank space to the right.

[Jay-PC]

Further clarification... After a couple hours of playing around with it, I think I found the bug... if your typical HTML for this carousel looks like the below... if you include the line, "display: flex;" in the class .carousel in the .css file, it seems to cause the issue for this bug. I want to use @media queries to set the size for this carousel and its content. For now, I have removed this line, and am working around it to get the size I ultimately want, but it would be nice if display:flex worked. If anyone has a suggestion, I'm open to trying it.

  <div class="carousel">
   <div> <!--*ngIf load complete-->
    <ngu-carousel
    [inputs]="carouselOne" 
    (initData)="initDataFn($event)"
    (carouselLoad)="onMoveSlide($event)">
    <ngu-item NguCarouselItem *ngFor="let Slide of Slides; let i = index">
    <mat-card> <!--can set background color at this level-->
     <div class="carousel-card">
     <div>
      <mat-card-content> <!--can set font-family here-->
      <div> <!--can set font-size here-->
      <app-video></app-video>
      </div>
      </mat-card-content>
     </div>
     <mat-card-actions layout="row" layout-align="end end" style="height:50px" flex>
     </mat-card-actions>
     </div>
    </mat-card> 
    </ngu-item>
    <button NguCarouselPrev class='leftRs'>&lt;</button>
    <button NguCarouselNext class='rightRs'>&gt;</button>
   </ngu-carousel>
   <div class='directions'>swipe for more</div>
   </div>
  </div>

[sheikalthaf]

@Jay-PC Hi,

Will you please create a stackblitz so that i can able find the solution easily.

Thanks

[sheikalthaf]

@Jay-PC This issue is fixed in latest version of the carousel. Thanks

[iseessel]

@Jay-PC May I ask how you got around this -- I am stuck on Angular5 and am experiencing this problem.

@sheikalthaf Latest version 1.5.1 is not backwards compatible is this correct?

[sheikalthaf]

@iseessel This issue happen because I'm using diplay flex and setting the item width using flex. But this cause item to be wider in unexpected condition. To work round this I'm setting width also with flex. Width prevent the item width not to be wider.

Yes 1.5.1 is not backward capitable because I'm using rxjs 6 and angular 6 library for bundling

[iseessel]

@sheikalthaf Thanks for your quick response -- would you be able to point me to the commit/lines you did this?

[iseessel]

@sheikalthaf update: figured it out -- thanks!