CODEWITHSUNDEEP
javascripthtmlcssangularjsionic-framework
qchap
qchap

Reputation: 345

Css dynamic font-size

I try to make a special screen very dynamic in AngularJS.

I this screen there is some object with a define size:

.item
{
  margin: auto;
  margin-bottom: 10px;
  width: 11vw;
  height: 11vw;
  text-overflow: ellipsis;
  overflow: hidden;
}

There items was insert by an ng-repeat loop base on the return of an API. 

  <div class="item"
       ng-click="ctrl.clickFunction()"
       ng-style="{'background-color':ctrl.color }">
    <div class="itemGlobalCode">{{::ctrl.name}}</div>
  </div>

Problem is my items were round and to have a best render I'd would like to change the font size of the content (here ctrl.name) if this content was to long to fit the container.

I find some jQuery solution but if it's possible I'd would like to avoid them and if it's possible I'd would like an pure CSS solution.

Have you some idea ?

Upvotes: 2

Views: 3229

Answers (2)

Matheus
Matheus

Reputation: 363

You can put a expression on ng-style:

Ternary

<div class="itemGlobalCode"
     ng-style="{'font-size': ctrl.name.length > 10 ? '12px' : '14px'}"></div>

Method

Controller

$scope.getFontSize(ctrlName) {
    if (ctrlName.length > 10) {
        return '12px';
    }

    return '14px';
};

View

<div class="itemGlobalCode"
     ng-style="{'font-size': getFontSize(ctrl.name)}"></div>

Plus: ng-class

You can also create classes with differnt font-sizes:

CSS

.itemSmall {
    font-size: 12px;
}
.itemBig {
    font-size: 14px
}

View

<div class="itemGlobalCode"
     ng-class="{'itemSmall': ctrl.name.length > 10, 'itemBig': ctrl.name.length <= 10}"></div>

Upvotes: 3

Eirini Graonidou
Eirini Graonidou

Reputation: 1566

You could use the ng-class directive

<div class="item"
   ng-click="ctrl.clickFunction()"
   ng-class="{'css-class1':condition1, 'css-class2':condition2() }">
<div class="itemGlobalCode">{{::ctrl.name}}</div>

and in your controller:

$scope.condition1 = true;
$scope.condition2 = function(input) {
     // or calculate,do something with the input
    return input.isTrue();
}

Upvotes: 1

Related Questions