Check if the content of the element is full?

Question

What is the easiest way to detect an element overflow?

My use case: I want to limit a specific content area to 300 pixels. If the inner content is above this, I crop it with overflow. But if it is full, I want to show the "more" button, but if not, I do not want to show this button.

Is there an easy way to detect overflow or is there a better way?

Answer 1

If you want to show only the identifier for more content, then you can do it with pure CSS. I use pure scroll shadows for this. The trick is to use background-attachment: local; . Your CSS is as follows:

 .scrollbox { overflow: auto; width: 200px; max-height: 200px; margin: 50px auto; background: /* Shadow covers */ linear-gradient(white 30%, rgba(255,255,255,0)), linear-gradient(rgba(255,255,255,0), white 70%) 0 100%, /* Shadows */ radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)), radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%; background: /* Shadow covers */ linear-gradient(white 30%, rgba(255,255,255,0)), linear-gradient(rgba(255,255,255,0), white 70%) 0 100%, /* Shadows */ radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)), radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%; background-repeat: no-repeat; background-color: white; background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px; /* Opera does not support this in the shorthand */ background-attachment: local, local, scroll, scroll; } 

 <div class="scrollbox"> <ul> <li>Not enough content to scroll</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> <div class="scrollbox"> <ul> <li>Ah! Scroll below!</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>The end!</li> <li>No shadow there.</li> </ul> </div> 

You can find the code and example at http://dabblet.com/gist/2462915

And an explanation you can find here: http://lea.verou.me/2012/04/background-attachment-local/ .

Answer 2

An element can be overflowed vertically, horizontally, or both. This function will return you a boolean if the DOM element is full:

 function isOverflown(element) { return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth; } 

ES6 Example:

 const isOverflown = ({ clientWidth, clientHeight, scrollWidth, scrollHeight }) => { return scrollHeight > clientHeight || scrollWidth > clientWidth; } 

Answer 3

Comparing element.scrollHeight with element.clientHeight should complete the task.

Below are images from MDN explaining Element.scrollHeight and Element.clientHeight.

Answer 4

I made a multi-component handle demonstrating the answers above (for example, using overflow hidden and height), as well as how you will expand / collapse overflow elements

Example 1: https://codepen.io/Kagerjay/pen/rraKLB (A real simple example, without JavaScript, just to trim overflowing elements)

Example 2: https://codepen.io/Kagerjay/pen/LBErJL (one event handler shows more / less on overflowed elements)

Example 3: https://codepen.io/Kagerjay/pen/MBYBoJ (in many cases, the event handler shows more / less on overflowing elements)

I also attached example 3 below , I am using Jade / Pug, so this can be a bit verbose. I suggest checking the code pens, which I have simplified.

 // Overflow boolean checker function isOverflown(element){ return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth; } // Jquery Toggle Text Plugin $.fn.toggleText = function(t1, t2){ if (this.text() == t1) this.text(t2); else this.text(t1); return this; }; // Toggle Overflow function toggleOverflow(e){ e.target.parentElement.classList.toggle("grid-parent--showall"); $(e.target).toggleText("Show More", "Show LESS"); } // Where stuff happens var parents = document.querySelectorAll(".grid-parent"); parents.forEach(parent => { if(isOverflown(parent)){ parent.lastElementChild.classList.add("btn-show"); parent.lastElementChild.addEventListener('click', toggleOverflow); } }) 

 body { background-color: #EEF0ED; margin-bottom: 300px; } .grid-parent { margin: 20px; width: 250px; background-color: lightgrey; display: flex; flex-wrap: wrap; overflow: hidden; max-height: 100px; position: relative; } .grid-parent--showall { max-height: none; } .grid-item { background-color: blue; width: 50px; height: 50px; box-sizing: border-box; border: 1px solid red; } .grid-item:nth-of-type(even) { background-color: lightblue; } .btn-expand { display: none; z-index: 3; position: absolute; right: 0px; bottom: 0px; padding: 3px; background-color: red; color: white; } .btn-show { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section> <p>Any grid-parent over 10 child items has a "SHOW MORE" button to expand</p> <p>Click "SHOW MORE" to see the results</p> </section> <radio></radio> <div class="wrapper"> <h3>5 child elements</h3> <div class="grid-parent"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="btn-expand">Show More</div> </div> <h3>8 child elements</h3> <div class="grid-parent"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="btn-expand">Show More</div> </div> <h3>10 child elements</h3> <div class="grid-parent"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="btn-expand">Show More</div> </div> <h3>13 child elements</h3> <div class="grid-parent"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="btn-expand">Show More</div> </div> <h3>16 child elements</h3> <div class="grid-parent"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="btn-expand">Show More</div> </div> <h3>19 child elements</h3> <div class="grid-parent"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="btn-expand">Show More</div> </div> </div> 

Answer 5

Will something like this: http://jsfiddle.net/Skooljester/jWRRA/1/ work? It simply checks the height of the content and compares it with the height of the container. If it is more than you can add the code to add the "Show more" button.

Update: Added code to create the "Show more" button at the top of the container.

Answer 6

If you use jQuery, you can try the trick: make an outer div with overflow: hidden and an inner div with content. Then use the .height() function to check if the height of the inner div is greater than the height of the outer div. I'm not sure this will work, but give it a try.

Answer 7

use js to check if the child of offsetHeight bigger than the parents. If so, do the parent overflow scroll/hidden/auto depending on what you want, and also display:block for a more div ..

Answer 8

Another issue you should consider is JS inaccessibility. Think of progressive enchantment or graceful degradation. I would suggest:

• add more button by default
• add default overflow rules
• hidden button and if necessary change CSS in JS after comparing element.scrollHeight with element.clientHeight

Answer 9

Here is a fiddle to determine if an element was overflowed using an overflow div wrapper: hidden and JQuery height () to measure the difference between the wrapper and the inner contents of the div.

 outers.each(function () { var inner_h = $(this).find('.inner').height(); console.log(inner_h); var outer_h = $(this).height(); console.log(outer_h); var overflowed = (inner_h > outer_h) ? true : false; console.log("overflowed = ", overflowed); }); 

Source: Frames and Extensions at jsfiddle.net

Answer 10

This is a jQuery solution that worked for me. clientWidth , etc. does not work.

 function is_overflowing(element, extra_width) { return element.position().left + element.width() + extra_width > element.parent().width(); } 

If this does not work, make sure that the parent element has the required width (I personally had to use parent().parent()) . position relative to the parent. I also included extra_width because my elements ("tags") contain images that take a little time to load, but they have zero width when calling a function, ruining the calculation. To get around this, I use the following call code:

 var extra_width = 0; $(".tag:visible").each(function() { if (!$(this).find("img:visible").width()) { // tag image might not be visible at this point, // so we add its future width to the overflow calculation // the goal is to hide tags that do not fit one line extra_width += 28; } if (is_overflowing($(this), extra_width)) { $(this).hide(); } }); 

Hope this helps.

Answer 11

You can check the bounds relative to the offset parent.

 // Position of left edge relative to frame left courtesy // http://www.quirksmode.org/js/findpos.html function absleft(el) { var x = 0; for (; el; el = el.offsetParent) { x += el.offsetLeft; } return x; } // Position of top edge relative to top of frame. function abstop(el) { var y = 0; for (; el; el = el.offsetParent) { y += el.offsetTop; } return y; } // True iff el bounding rectangle includes a non-zero area // the container bounding rectangle. function overflows(el, opt_container) { var cont = opt_container || el.offsetParent; var left = absleft(el), right = left + el.offsetWidth, top = abstop(el), bottom = top + el.offsetHeight; var cleft = absleft(cont), cright = cleft + cont.offsetWidth, ctop = abstop(cont), cbottom = ctop + cont.offsetHeight; return left < cleft || top < ctop || right > cright || bottom > cbottom; } 

If you pass this element, it will tell you whether its borders are entirely inside the container and by default will refer to the parent offset of the element if no explicit container is provided. He uses

Answer 12

 setTimeout(function(){ isOverflowed(element) },500) function isOverflowed(element){ return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth; } 

It worked for me. Thank.

Answer 13

An alternative to the jquery response is to use the [0] key to access the raw element, like this:

 if ($('#elem')[0].scrollHeight > $('#elem')[0].clientHeight){