Make all the objects using 'data-fittext' have the same font-size

[geoffreybauduin]

Hi,

I'm using your plugin and I'd like to know if there's any way to have the same size for a set of elements. I have a grid with 3 elements in it and I'd love to have a 'fixed' font-size, that would correspond to the minimal font-size in this set, for all my items in the set

[patrickmarabeas]

Not from my understanding of what you are saying, but if you could whip up a couple examples in Photoshop or something that would be helpful. If it can't be done, it sounds like a good feature - but will probably be some time off.

[geoffreybauduin]

Woops, sorry I should have included a screenshot

So here we have two texts (Basket ball and "Course à pied" it's french, in case you're wondering)

<div class="col-auto align-center" ng-repeat="sport in user.sports">
  <img ng-src="{{ sport.getPicture() }}" ng-alt="{{ sport.slang }}" class="dashboard-sport-image"><br>
  <span class="dashboard-sport-name" data-fittext>{{ sport.french_value }}</span>
</div>

I'dl like to get these texts to be of the same size, and the biggest possible (the intent of this being to have the longer text fit on one line whatever the size of the viewport is).

[patrickmarabeas]

I had a quick play around with this problem and it's all feeling pretty hacky so far. I'll have a think about attributes on child elements and what not.

[Mikebert4]

I had the same play around - got something working but nothing that I'd be happy sharing yet. I'm actively working to solve this for a project of my own, as soon as I have a workable solution I'll put a pull request in.

[patrickmarabeas]

Sweet, cheers : )

[geoffreybauduin]

@Mikebert4 any updates on it or should I consider putting some effort into it as well?

[patrickmarabeas]

What could be done is add in the ability to do OTHER THINGS after a calculation which would be accessible through an after method on the fitTextConfigProvider. This guy could report the calculated size to your controller which determines the smallest and broadcasts an event to update the directives. I'll have a play around with this.

[Mikebert4]

Update: I've gotten pulled off into other projects and another dev 'solved' the issue I was having by making our title-bars non-dynamic. Sorry folks :(

[myrcutio]

Can fittext add a style tag to the page with something like <style>ngFitText-minimum { font-size: 11.5px !important; }</style> where 11.5px is the smallest size it has assigned to an element? the name for this style could even be a data attribute, i.e. `

Long text that overflows a title

Shorter Text

`