Clever Geek Handbook

Angular Set dynamic height for an element of its parent div

I have the following scenario:

 <div class="parent" style="height:100%">
        <div class="left" style="float:left" dynamic-height element-id="{{$index}}">
        </div>
        <div class="right" style="float:left">
            <div>Element 1</div>
            <div>Element 2</div>
    </div>
    </div>

I'm trying to keep the left element at the same height as .right or .parent, I was trying to add a directive for this without much success, does anyone have a better idea?

directive:

.directive('dynamicHeight', function() {
    return {
        compile: function compile(tElement, tAttrs, transclude) {
            return {
                post: function postLink(scope, elem, attrs) {
                    var element = "#discussion-element-"+ attrs.elementId;
                    var myEl = angular.element( document.querySelector( element) );
                    var height = myEl[0].offsetHeight;
                    element.height(height);
                }
            }
        }
    };
});

An image that illustrates the problem:

enter image description here

+3


source to share


2 answers


Try to remove the style float: left

and apply the following styles instead:



.parent {
    display: table;
}

.parent > * {
    display: table-cell;
}
+2


source


Better to do it in css,

as commented you can use css to get this. (for example, https://css-tricks.com/fluid-width-equal-height-columns/ )

If you still want angular

you can add $watch

inside directives to get a callback when the width & height

parent changes . from there you can change the height of the element



Html

<div class="container demo">
    <div ng-controller="MyCtrl">
        <div>
            <button class="btn btn-primary" ng-click="isLarger = !isLarger">toggle parent size</button>
        </div>
        <hr>
        <div class="parent" ng-class="{'larger':isLarger}">
            <div class="child" dynamic-height>{{message}}</div>
        </div>
    </div>
</div>

Js

var app = angular.module('myApp', []);

app.controller('MyCtrl', function ($scope) {
    $scope.message = 'hello';
});

app.directive('dynamicHeight', function () {
    return {
        restrict: 'A',
        link: function (scope, elm, attrs) {
            var parent = elm.parent();

            scope.$watch(function () {
                return {
                    height: parent.prop('offsetHeight'),
                    width: parent.prop('offsetWidth')
                };
            }, function (size) {

                // Here you have `size = {height: ... , width: ... }`
                // you can manipulate the element with this data. for example:

                // elm.css('min-width', size.width + 'px');
                // elm.css('min-height', size.height + 'px');

                // -- note that this will make the responsiveness of the ui a bit more challanging 
            }, true);
        }
    };
});

http://jsfiddle.net/f62ccw5a/

+1


source






More articles:


All Articles