How to show/hide button properly in my case?

Question

I am trying to build a 'show more' button for my app and I have encountered an issue.

I have a directive to do stuff when user click read more button

(function(window, angular) {
    var app = angular.module('myApp');
    app.directive('readMore', [
        function() {
            return {
                restrict: 'A',
                template:'<a class="read-more-button"></a>',
                link: function(scope, element) {                        
                    element.bind('click', function(){
                        // do stuff
                    })  
                }
            };
        }
    ]);
})(window, angular);

Html

<div id="container">
    <div ng-repeat="item in items">
        {{item.description}}
    </div>
</div>
<a ng-show="items.length > 10" read-more href="#"></a>
//only show read more button when I have more than 10 items

CSS:

#container {
    height: 250px;
    overflow: hidden;
}

The problem is sometimes a single item.description has long texts and my #container div can only hold 8 items and the rests are hidden. I don't want to count the letters because I thought that's not practical. Is there anyway to fix this? Thanks for the help!

Update:

The desired result will be: When click read more button, the div size will expand to whatever it should be. Currently the read more button will show only if the app has > 10 items. My question is how to show/hide read more button properly when 8 items texts already fill 250px div but I actually have 9 items (so it should show read more button but since it only has 9 items, the read more button won't show.)

The bottom line is: I need to know when to show read more button when the #container div is filled with texts regardless how many items I have

It's not clear to me what your question is. First, what does "read more" do? Does it expand the `#container` div or does it load more `items`? Second, is your question about how to show 8 items regardless of `item.description` text size? — New Dev, Oct 15 '15 at 00:09
So, is the question about how to do this with Angular assuming that you can calculate the size of content relative to the size of the container? Or is the question, how to even determine whether overflow happened? The latter is too broad in my opinion (and not very Angular-related) — New Dev, Oct 15 '15 at 00:20
@NewDev I need to know when to show read more button when the #container div is filled with texts regardless how many items I have. — FlyingCat, Oct 15 '15 at 00:22
It looks like your making a directive for something that can be (and should be) easily handled with an `ngClick` directive. — Jeff, Oct 15 '15 at 00:48

score 0 · Answer 1 · edited May 23 '17 at 12:23

Let me get your questions right, you want to be able to detect if the content of a fixed width div fills or overflows the div (regardless of the number of contents as they may have different sizes), and if so show a read more button?

If so check this thread out, it has the same problem, with a sample javascript snippet to do the checking which you can adapt into your angular directive above:

javascript css check if overflow

score 0 · Accepted Answer · answered Oct 15 '15 at 02:03

I think that we need discuss about your CSS

#container {
height: 250px;
overflow: hidden;}

It means that you want to fix height as 250px and if conntent in #container has height than 250px then it will be hide redundant part.

So sometime a single item.description has long texts you only see 8 or 7 or 6 items, that is correct.

Maybe have two ways to do:

If you want to fix height as 250px. You can change overflow: hidden; to overflow:scroll;. You will see all 10 items but div has scroll.
If you don't want to fix height as 250px. You can change to

'#container{height:auto; overflow:visible;}

Hope it helps.

How to show/hide button properly in my case?

2 Answers2