Text sizing only applies on resize

madmacc commented

2020-09-03 05:22:24 +00:00

(Migrated from github.com)

It doesn't apply unless I resize my browser window. Not sure why.

"ng2-fittext": "^1.2.12"

 <div *ngIf="appUser" class="user">
    <div class="anchor" #container  [routerLink]="['/user']">
      <div [fittext]="true" [activateOnResize]="false" [container]="container" [maxFontSize]="13">{{appUser.firstName}}</div>
    </div>
  </div>

It doesn't apply unless I resize my browser window. Not sure why. "ng2-fittext": "^1.2.12" ``` <div *ngIf="appUser" class="user"> <div class="anchor" #container [routerLink]="['/user']"> <div [fittext]="true" [activateOnResize]="false" [container]="container" [maxFontSize]="13">{{appUser.firstName}}</div> </div> </div> ```

👍 4

FlavioSantoro92 commented

2020-09-24 15:33:03 +00:00

(Migrated from github.com)

Same problem here, same situation. I tried everything but only when the screen is redrawn the resize will work.

yurik94 commented

2020-12-09 10:36:45 +00:00

(Migrated from github.com)

Same for me...

madmacc commented

2020-12-09 19:45:58 +00:00

(Migrated from github.com)

I just had to remove it in the end I couldn't figure it out.

yurik94 commented

2020-12-09 20:02:40 +00:00

(Migrated from github.com)

I just had to remove it in the end I couldn't figure it out.

I got it working (the npmjs published version seems 8 months old rather than the master here)
I have simply copied the directive part to my project and the i used this sample code in a ionic 3 project (Angular 5):

<div class="inner" #upper_inner>
   <div class="text" [fittext]="true" [activateOnResize]="true" [container]="upper_inner" [modelToWatch]="upper_text">{{upper_text}}
    </div>
</div>

I had to change the directive's constructor like this:

constructor(public el: ElementRef, public renderer: Renderer2) {

> I just had to remove it in the end I couldn't figure it out. I got it working (the npmjs published version seems 8 months old rather than the master here) I have simply copied the directive part to my project and the i used this sample code in a ionic 3 project (Angular 5): ``` <div class="inner" #upper_inner> <div class="text" [fittext]="true" [activateOnResize]="true" [container]="upper_inner" [modelToWatch]="upper_text">{{upper_text}} </div> </div> ``` I had to change the directive's constructor like this: `constructor(public el: ElementRef, public renderer: Renderer2) {`

rbalet commented

2021-05-18 19:41:48 +00:00

(Migrated from github.com)

I just had to remove it in the end I couldn't figure it out.

I got it working (the npmjs published version seems 8 months old rather than the master here)
I have simply copied the directive part to my project and the i used this sample code in a ionic 3 project (Angular 5):
<div class="inner" #upper_inner>
   <div class="text" [fittext]="true" [activateOnResize]="true" [container]="upper_inner" [modelToWatch]="upper_text">{{upper_text}}
    </div>
</div>
I had to change the directive's constructor like this:

constructor(public el: ElementRef, public renderer: Renderer2) {

This did not work for me by the way. As of today, the problem still exists on ionic v > 3.

> > I just had to remove it in the end I couldn't figure it out. > > I got it working (the npmjs published version seems 8 months old rather than the master here) > I have simply copied the directive part to my project and the i used this sample code in a ionic 3 project (Angular 5): > > ``` > <div class="inner" #upper_inner> > <div class="text" [fittext]="true" [activateOnResize]="true" [container]="upper_inner" [modelToWatch]="upper_text">{{upper_text}} > </div> > </div> > ``` > > I had to change the directive's constructor like this: > > `constructor(public el: ElementRef, public renderer: Renderer2) {` This did not work for me by the way. As of today, the problem still exists on ionic v > 3.

hararia commented

2021-07-16 16:09:55 +00:00

(Migrated from github.com)

You can trigger a window resize event with something like:

window.dispatchEvent(new Event('resize'));

You can trigger a window resize event with something like: ` window.dispatchEvent(new Event('resize')); `

❤️ 2

shaya-tabit commented

2022-07-19 13:12:40 +00:00

(Migrated from github.com)

I found 2 ways that worked for me -

Provide a dynamic variable to [modelToWatch]
Dispatch a resize event within a ngAfterViewInit -> setTimeout (less preferred)

I found 2 ways that worked for me - 1. Provide a dynamic variable to `[modelToWatch]` 2. Dispatch a resize event within a `ngAfterViewInit -> setTimeout` (less preferred)

thisloke commented

2024-01-15 15:42:35 +00:00

(Migrated from github.com)

By design, just using activateOnResize=true should solve every problem, the font resizing will triggered when window size it's changed. Anyway, if you want to force-trigger the computation un can change the model passed as parameter to modelToWatch or as a workaround window.dispatchEvent(new Event('resize')) looks working fine.

By design, just using **activateOnResize=true** should solve every problem, the font resizing will triggered when window size it's changed. Anyway, if you want to force-trigger the computation un can change the model passed as parameter to **modelToWatch** or as a workaround **window.dispatchEvent(new Event('resize'))** looks working fine.

thisloke commented

2024-01-15 15:42:47 +00:00

(Migrated from github.com)

See latest comment

Rows
Columns

Text sizing only applies on resize #41