Not working in Firefox

[nolafs]

Hi,

It seems not to work as expected in firefox 68.0.2 (64-bit). It only prints the ... but none of the content.

Any idea how to fix this?

Cheers Olaf

[lentschi]

Hi @nolafs! I'm sorry, but I can't reproduce your issue (running the exact same Firefox version as you). Does the StackBlitz demo page (same as in the README) work for you? If yes, then there must be problem with your specific usage of ngx-ellipsis. In that case please provide a failing StackBlitz example to illustrate. If no, what operating system are you on? Also could you please attach a JS log of the app you're using the lib in and a screenshot?

[nolafs]

Hi @lentschi,

I am using it in combination with cdk virtual scroll viewport.

<cdk-virtual-scroll-viewport  *ngIf="isViewAll" [itemSize]="_paginatedList?.list.length" [ngStyle]="{'height': (scrollHeight) +'px'}" >
    <ul class="list article-link" *ngIf="scrollWidth">
      <li *cdkVirtualFor="let item of _paginatedList.list;  templateCacheSize: 0"  class="article-list-item"  [@animate]="{value:'*',params:{y:'100%'}}">

        <a  [href]="item.html_url"
            [ngStyle]="{'width': (scrollWidth) +'px'}"
            class="select-item"
            ellipsis-resize-detection="window"
            ellipsis="..."  [ellipsis-content]='item.title'
        ></a>
      </li>
    </ul>
    </cdk-virtual-scroll-viewport>

Here is my angular version:

@angular-devkit/architect 0.800.6 @angular-devkit/build-angular 0.800.6 @angular-devkit/build-optimizer 0.800.6 @angular-devkit/build-webpack 0.800.6 @angular-devkit/core 8.0.6 @angular-devkit/schematics 8.0.6 @angular/cdk 8.0.2 @angular/cdk-experimental 8.1.3 @angular/cli 8.0.6 @angular/elements 8.2.2 @angular/flex-layout 8.0.0-beta.26 @angular/material 8.1.3 @ngtools/webpack 8.0.6 @schematics/angular 8.0.6 @schematics/update 0.800.6 rxjs 6.5.2 typescript 3.4.5 webpack 4.30.0

Chrome:

Firefox Mac

[nolafs]

Hi @lentschi,

I can confirm, it doesn't work with cdk virtual scroll.

Top list is with cdk and bottom is just simple list. It has to do with resize detection. If I set it to manual, it shows the content but it won't shorten the content.

[lentschi]

@nolafs Ah cdk-virtual-scroll-viewport again - This has already been discussed in #15, remember? Did you check out the cdk-virtual-scroll-viewport StackBlitz sample I posted there & did it work for you? (For me it still does with Firefox 68.0.2 64bit on Linux)

It has to do with resize detection. If I set it to manual, it shows the content but it won't shorten the content.

Well yes, ellipsis-resize-detection=manual would require you to trigger the ellipsis generation manually as described in the README: "... Instead the consuming app may use #ell="ellipsis" in the template and this.ell.applyEllipsis() in the component code."

But in my sample the default resize detection (or better: "window") works just fine - so I'm not sure where your problem lies - I guess somewhere with your anchor tag's styles: ngx-ellipsis doesn't apply any styles, so you need to ensure that it applies the correct dimensions on its own. (Maybe there's a difference in how Firefox applies your css from how Chrome does.)

If you could fork the StackBlitz sample and add your styles & sample component code, I might see what the problem is. (The html code sample you posted alone seems fine at a first glance.)

[nolafs]

Hi Lentishi,

Thanks for your help. It will take me while to pull together an example on StackBlitz. In my case, I am using two lists depending on state of the application. The first lists is loaded on init of the component. That one works just fine but once I hide this list and display the secondary list, it won't work.

I will try getting sample code over to you as soon I have time.

Thanks, really appreciate your help on this.

[nolafs]

Ok, I have where the problem is. Firefox doesn't calculate the height of the nested ahref correctly. I have set the height inline every time I show the list.

Thanks for you help.