JavaScript, AngularJS: How do I know if element is larger than its container?


Tags: javascript,css,angularjs,angularjs-directive

Problem :

Let’s say I have a title in h1 element (any element would do). Its content is dynamic (do not know length of the title). It is supposed to be displayed in one line. h1 is in a DIV (let’s call it a container) of limited size.

How do I know if element (h1) overflows its container (DIV)?

So that if it overflows I would apply a CSS class to deal with the situation. For example I would scroll hidden content of h1 into view.

  • Width of the container is defined are relative to the screen size.

Example:

#container {
    width: 60%;
    background-color: gray;
    height: 50px;
    // overflow: hidden;
    position: relative;
}

h1 {
    overflow: hidden;
    height: 100%;
    margin: 0;
    line-height: 50px;
}
<div id="container">
    <h1>a soft white or grey mineral consisting of hydrated calcium sulphate. It occurs chiefly in sedimentary deposits and is used to make plaster of Paris and fertilizers, and in the building industry.</h1>
</div>

Best solution would be if it could be used in: primary in ngIf, secondary in ngClass directives, but any of following technologies are also good: Javascript, AngularJS, CSS, AngularJS directive.



Solution :

Here is my solution in AngularJS directive. It does not rely on parent element:

var myDirective = angular.module('myDirective', []);
myDirective.directive( 'myDirective' , ['$timeout' , function($timeout) {
    return {
        link: function (scope , element , attrs) {

            // Wait few milliseconds until element is re-rendered 
            // so that element properties reflect content size.
            $timeout( function(){
                if (element[0].scrollWidth > element[0].offsetWidth){
                    // overflow
                }
            }, 200); // $timeout
        } // link
    }; // return
}]); // myDirective

Usage example:

<h3 my-directive>Hello World!</h3>

Note: Parent element must have restricted size otherwise it will adjust to the content and element will never overflow.


    CSS Howto..

    How do I make it impossible to highlight text using CSS?

    How to have different table styles in CSS

    How to get same effect as jQuery's slideToggle using CSS 3 transitions?

    How to serve different size SVG graphic in css background image?

    how to rotate text with css? transform is not supported by current schema?

    How to display “a” to full of the line

    jQuery How do i apply CSS to selected text

    How to change comma separated css values with Jquery.css Method?

    How can I create a borderless textbox in Google Chrome using CSS?

    how to clip text in css like gmail does to emails subject listings

    how to make edges of a line fade out?

    Image div showing in Safari, Chrome and IE but not in Firefox

    How to make this CSS into a responsive one? [closed]

    Including loads of css files and Javascript file - how do I optimize

    How to do centered

    with
    on both sides over a background image

    how to get the height of a div with overflow:auto property set in css

    How would I achieve this CSS effect (centering content and padding)?

    How to Format text boxes with Css

    CSS: how do I add Twitter Bootstrap to an existing web page with it's own CSS?

    How do I investigate a “style sheet could not be loaded” message in Firefox?

    How to adjust contents to automatically fit size of the screen?

    How to prevent HTML Email from having quoted printable when sending with C# using System.Net.Mail.MaiMessage

    ExtJS - How to customize buttons?

    How to make a horizontal list start in the center of the page?

    How to style a credit card expiration date input field to include spaces and forward slash?

    How to not display common border between two adjacent divs?

    How to design a CSS for floating confirm dialog centered on the visible portion of a page?

    how to hidden image over image in css

    How would I make this into an dynamic :nth-child css selector [duplicate]

    CSS How to erase the border from the image link?