ng4-fittext usage issue

[LanderBeeuwsaert]

Hello,

I'm trying to use this for a project of mine. I've already used the old fittext but that's not easy in angular. The ng2 one has issues when I use it. This one does not seem to work?

I've connected it to a div like this:

<div class="information-input-2row" style="width:100px;color:black;background-color: rgba(0, 0, 0, 0.1);white-space: nowrap;" #base_1 [container]="base_1" [fittext] [activateOnResize]="true" [compression]="1.5">{{currentInfoModel?.base_1 | removeUndefined}}</div>

The compression is done right of the bat when loading the component. However that's the only thing that happens. No logic is done except for that. The value of the text is loaded asynced, but the text is not resized anymore. Also, when resizing the browser window nothing is done.

Any ideas?

Kind regards,

Lander

[sollenne]

the [container] attribute's value needs to be the parent container. So it should look like this.

<div #base_1 class="information-input-2row" style="...">
    <div [fittext]
            [container]="base_1" 
            [activateOnResize]="true" 
            [compression]="1.5">
        {{ currentInfoModel?.base_1 | removeUndefined }}
    </div>
</div>```

Hope this helps!

[LanderBeeuwsaert]

Hello Sollenne,

I tried it but that doesn't do the trick neither:

<div #top style="width:100%;display:flex;flex-direction: row">
        <div class="information-label" style="width: 50px">TOP</div>
        <div class="information-input-2row" style="width:100px;color:black;background-color: rgba(0, 0, 0, 0.1);white-space: nowrap;" [container]="top" [fittext] [activateOnResize]="true" [compression]="1.5">{{currentInfoModel?.top | removeUndefined}}</div>
</div>

[LanderBeeuwsaert]

Thanks for the help!

[sollenne]

This is what happens when I test your snippet.

What exactly is the problem? If I had to guess. I would say that you don't have a width set on the parent container of the first <div> in your snippet.

edit: also you can leave off [activateOnResize] if you are passing in a hardcoded value of true, this defaults to true. This attribute is for dynamically changing it if you need to.

[LanderBeeuwsaert]

Hello, I've put widths on 3 levels above the node I want to dynamically adapt. See the screenshot: 205px -> 205px -> -> 50px -> -> 155 px (== node to adapt) That means all necessary widths are present right?

[sollenne]

this is how I would do it.

 <div class="parent" style="max-width:205px;display:flex;flex-direction: row; background: #e6e6e6;">
        <div class="top" style="width: 50px; background: #cbcbcb; text-align: center;">TOP</div>
        <div class="name" style="width: 155px;">
            <div class="fittext-container" #fittextContainer>
                <div class="fittext"
                     style="white-space: nowrap;"
                     [fittext]
                     [compression]="compression"
                     [maxFontSize]="16"
                     [container]="fittextContainer">
                    {{topName}}
                </div>
            </div>
        </div>
    </div>

This wasn't designed with dynamic strings in mind, but it's not that hard to figure it out. Since you can pass a number into the [compression] attr, I would do something like this:

// get the name from wherever
public topName: string = 'LongFirstName LongLastName';
public compression: number;

public ngOnInit(): void {
    this.calculateCompression();
}

public calculateCompression = (): void => {
    // figure this part out
   this.compression = this.topName.length > 10 ? 1.2 : 1.4;
}

[LanderBeeuwsaert]

Ok, no problem. Of course I can add a line of code to change the compression depending on the string length unintelligently (not taking the container into account). However adapting the font-size depending on the string length unintelligently I can do with 1 line of code myself.

In all the other fitText repositories I've seen the whole point of the fitText idea is that it fits the (dynamic) text automatically to the container right? I don't see the point of the directive if it doesn't do that?

[sollenne]

Original fittext works the same way. See this CodePen Maybe you should change the UI to allow more than 155px. That's very little space for a long name. Fittext is for large text, not tiny text. If you want to try it out, just make a PR. I'll take a look at getting this to work. Closing this issue for now

[LanderBeeuwsaert]

Hey Sollenne,

Ah ok. I was talking about for example the 'ModelToWatch' from https://github.com/lokenxo/ng2-fittext. but no problem, thanks for looking into it.

greetz