Displaying elements in Angular based on their height

Question

Displaying elements in Angular based on their height

I'm currently working on a paragraph that adjusts its length based on the maximum height. I'm interested in finding a way to display or hide the anchor element if the height exceeds a specific limit. Essentially, I only want to show "more..." when necessary.

$scope.hidden = true;

    .__Description {
    overflow: hidden;
    word-wrap: break-word;
    text-overflow: ellipsis;
    }
    .less {
      max-height: 160px;
 
    }

<div class="__Description">
    <div class="__contents" ng-class="{less: hidden}">
    <div data-ng-bind-html="program.Description"></div>
    </div>
    </div>
    <a ng-click="hidden = !hidden">{{hidden? 'More...' : 'Less...'}}</a>

javascript html css angularjs

Answer 1

Answer №1

A possible solution could involve encapsulating the content and read more functionality within a directive.

The directive could monitor the height of the content, then trigger a scope property toggle.

Below is a basic outline in pseudo code. (link to plunker provided below) To tailor the code for your specific requirements, additional information would be necessary

<program-description>
<div class="__programDescription">
    <div class="__contents" ng-class="{less: hidden}">
        <div data-ng-bind-html="program.Description"></div>
    </div>
</div>

</program-description>


angular.module('myApp').directive('programDescription', function(){

    return {

         restrict: 'A',
         transclude: true, 
         template: '<div><div ng-transclude></div> <a ng-show="showToggle">{{ toggleText }}</a></div>',
         link: function( scope, element, attrs ){
               var limit = attrs.limit  ? parseInt(attrs.limit,10) : 200; // default to 200px
               scope.$watch(function(){
                   return element.find('.__programDescription').height();
               }, function(if (newValue > limit){
                   scope.showToggle = true;
               });

               .. additional code to manage more/less clicks.. 

         }
     }

})

a functional plunker example can be accessed at: http://plnkr.co/edit/Sm393HAzTRp8wqEPNkdg?p=preview

Answer 2

A possible solution could involve encapsulating the content and read more functionality within a directive.

The directive could monitor the height of the content, then trigger a scope property toggle.

Below is a basic outline in pseudo code. (link to plunker provided below) To tailor the code for your specific requirements, additional information would be necessary

<program-description>
<div class="__programDescription">
    <div class="__contents" ng-class="{less: hidden}">
        <div data-ng-bind-html="program.Description"></div>
    </div>
</div>

</program-description>


angular.module('myApp').directive('programDescription', function(){

    return {

         restrict: 'A',
         transclude: true, 
         template: '<div><div ng-transclude></div> <a ng-show="showToggle">{{ toggleText }}</a></div>',
         link: function( scope, element, attrs ){
               var limit = attrs.limit  ? parseInt(attrs.limit,10) : 200; // default to 200px
               scope.$watch(function(){
                   return element.find('.__programDescription').height();
               }, function(if (newValue > limit){
                   scope.showToggle = true;
               });

               .. additional code to manage more/less clicks.. 

         }
     }

})

a functional plunker example can be accessed at: http://plnkr.co/edit/Sm393HAzTRp8wqEPNkdg?p=preview

Answer 3

Answer №2

One way to determine whether you should display something is by examining the extent of your explanation.

Meaning and Application

The length property provides the number of characters in a string.

An empty string has a length of 0.

For instance:

<a href="#" ng-show="message.Content.length < 1000">Show More...</a>

Modification:

Incorporating @Andrew Tomlinson's suggestion, you can condense the logic into one sentence like so:

<a href="#"> (message.Content.length < 1000) ? 'Show More...' : 'Show Less...'</a>

Answer 4

One way to determine whether you should display something is by examining the extent of your explanation.

Meaning and Application

The length property provides the number of characters in a string.

An empty string has a length of 0.

For instance:

<a href="#" ng-show="message.Content.length < 1000">Show More...</a>

Modification:

Incorporating @Andrew Tomlinson's suggestion, you can condense the logic into one sentence like so:

<a href="#"> (message.Content.length < 1000) ? 'Show More...' : 'Show Less...'</a>

Displaying elements in Angular based on their height

Answer №1

Answer №2

Similar questions

Tips for incorporating a title and script into a Vue template using Nuxt.js

Imitating Long Polling technique causing delays in rendering the entire webpage

What is causing the border-radius property to malfunction on a particular website when using Internet Explorer?

What is the process for adding a dot to the package.json file using the npm-pkg command?

Is it possible to bind browser keyboard scrolling to a div without explicit instructions?

Seeking help with executing JQuery Ajax functions within a foreach loop

Transfer results of SQL query from PHP to JavaScript array

Struggling to get Angular Formly to properly inject into my module

Radio buttons failing to submit

Utilizing JavaScript to update the content of a React page

Can we execute a function once a mandatory field in a form has been validated successfully?

CSS - Implementing two stylesheets sequentially in an Opencart website

Obtain file paths from a folder using JavaScript

Implementing overlay content areas on a Bootstrap 3 website when the responsive menu is activated

Generating a clickable link for the URL included in a tweet message

Select state and city options similar to the national breakdown page

Is your Facebook send button appearing strangely? Find out how to fix it here!

Retrieve the designated element from an array of JSON data in SPLUNK

Is there a way to capture an error message in the JSON fetch response?

Retrieving information from a JSON web service can easily be done using just JavaScript and jQuery