CODEWITHSUNDEEP
javascriptcssangularjs
Liad Livnat
Liad Livnat

Reputation: 7475

Angular Set Dynamic Height for element of his 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 that the left element will be at the same height as the .right or the .parent, i tried to add directive for that, with not much success, anyone have a better idea?

the 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);
                }
            }
        }
    };
});

Image that illustrate the issue:

enter image description here

Upvotes: 3

Views: 5904

Answers (2)

Jossef Harush Kadouri
Jossef Harush Kadouri

Reputation: 34207

It's better to do that in css,

as commented, you can use css to get that. (e.g. https://css-tricks.com/fluid-width-equal-height-columns/)

If you still want angular

you can add a $watch inside the directive's scope to get a callback when the width & height of the parent element changes. from there you can change the element height

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/

Upvotes: 1

jirikuchta
jirikuchta

Reputation: 338

Try removing the float: left style and applying these styles instead:

.parent {
    display: table;
}

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

Upvotes: 2

Related Questions