When the div tag exceeds its boundaries, apply a new class

Question

When the div tag exceeds its boundaries, apply a new class

I am working on a div with set dimensions, and I am populating it with content using ng-repeat. My goal is to apply a CSS class to this div when it exceeds its limits. I attempted to use the length property but without success.

var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
  $scope.placeholder = ['Koenigsegg CCXR Trevita',
    'Lamborghini Veneno',
    'W Motors Lykan Hypersport',
    'Bugatti Veyron',
    'Ferrari Pininfarina Sergio',
    'Pagani Huayra BC',
    'Ferrari F60 America',
    'Bugatti Chiron',
    'Koenigsegg One',
    'Koenigsegg Regera'
  ];
});

div {
  height: 40px;
  width: 400px;
  background: #f2f2f2;
  padding: 5px;
}
span {
  border: 1px solid #999;
  padding: 3px;
  display: inline-block;
  margin: 2px;
  border-radius: 3px;
}

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<div ng-app="myApp" ng-controller="personCtrl">
  <span ng-repeat="j in placeholder;">
    {{j}} &times;
  </span>

</div>

Note: I am limited to using only Javascript or AngularJS for this task.

javascript html angularjs css

Answer 1

Answer №1

If you want to add a class when the array has too many items, you can utilize the ng-class attribute.

var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {

});

div{height:100px;width:100px;background:#f2f2f2;border:1px solid #000}
div.too-long {background-color: #FF6666}

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<div ng-app="myApp" ng-controller="personCtrl" ng-class="{'too-long': placeholder.length > 6}" ng-init="placeholder=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]">
  <span ng-repeat="j in placeholder;">
    {{j}} Content
  </span>

</div>

However, if you need to compare the size of content and the div itself, you can use the offsetHeight and scrollHeight properties of your div

var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope, $element) {
    $scope.placeholder = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]
    $scope.overflow = function() {
        return $element[0].scrollHeight > $element[0].offsetHeight;
    }
});

div{height:100px;width:100px;background:#f2f2f2;border:1px solid #000}
div.too-long {background-color: #FF6666}

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<div ng-app="myApp" ng-controller="personCtrl" ng-class="{'too-long': overflow()}">
  <span ng-repeat="j in placeholder;">
    {{j}} Content
  </span>

</div>

Answer 2

If you want to add a class when the array has too many items, you can utilize the ng-class attribute.

var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {

});

div{height:100px;width:100px;background:#f2f2f2;border:1px solid #000}
div.too-long {background-color: #FF6666}

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<div ng-app="myApp" ng-controller="personCtrl" ng-class="{'too-long': placeholder.length > 6}" ng-init="placeholder=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]">
  <span ng-repeat="j in placeholder;">
    {{j}} Content
  </span>

</div>

However, if you need to compare the size of content and the div itself, you can use the offsetHeight and scrollHeight properties of your div

var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope, $element) {
    $scope.placeholder = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]
    $scope.overflow = function() {
        return $element[0].scrollHeight > $element[0].offsetHeight;
    }
});

div{height:100px;width:100px;background:#f2f2f2;border:1px solid #000}
div.too-long {background-color: #FF6666}

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<div ng-app="myApp" ng-controller="personCtrl" ng-class="{'too-long': overflow()}">
  <span ng-repeat="j in placeholder;">
    {{j}} Content
  </span>

</div>

When the div tag exceeds its boundaries, apply a new class

Answer №1

Similar questions

Tips for customizing the appearance of date circles and text in Vue V-Calendar.io

Make dark mode the default setting in your Next JS application

Achieving precise alignment of div content through Css techniques

Tips for applying styles to elements that are not directly related when the parent element has a specific class using CSS

How can I most effectively establish defaultValues for react-hook-form in this scenario?

Press `Enter` to confirm your selection in the BootstrapVue message box input box

What is the best way to isolate the CSS of individual components in Angular 2?

Error: Attempting to access a property named '_updatedFibers' on an undefined object is not possible due to a TypeError

What is the best way to adjust the size of a background image on Safari

Associate the callback function with a directive that does not have an isolated scope

What is the best method to retrieve multiple values from a select dropdown and showcase them in an input field using ajax?

Navigating from an AngularJS page to a ReactJS page on separate ports: A quick guide

Looking to incorporate Slick Carousel as the main slider on my website for a dynamic hero section using JavaScript

Use jQuery to switch out certain text with specified HTML elements

I have implemented the appropriate code to showcase a background color, yet it doesn't seem to be appearing on the screen. Additionally, I am utilizing Sass in this project

Uncovering the specific file housing a CSS definition

Displaying incorrect data with AngularJS

Is my Discord.js bot malfunctioning due to incorrect indentation, despite the absence of errors?

Generate a standard Wordpress menu containing all pages without the need to manually add each page in the menu editor

The image does not appear to have been edited even after clicking the update button