Angular make fixed display element same size as "sibling" - html

Question

I have a div that needs to be fixed to the bottom of the screen, but must be the same width as the content it scrolls past. Here's a picture of what I'm talking about:
The problem with just setting the div's width as a percent of the screen size is that there's a sidenav (not shown, but the gray area to the left indicates where it is horizontally; it's above the top of the image) which hides when the screen size gets too small to display it and the mdCards. So, when it's hidden each mdCard takes up a much larger portion of the screen than when it isn't hidden, and all of this is handled by angular because these elements are angular built-ins. However, my fixed div (it's actually also an mdCard, but that's irrelevant... maybe) is not resized in this way, obviously. So I need a way to make its width always the same as its siblings' width. My template looks something like this:
<!-- content container -->
<div>
<!-- bunch of mdCards -->
<md-card class="searchResult">
<!-- This one is guaranteed to exist -->
</md-card>
<md-card class="searchResult" ng-repeat="result in searchResults track by $index">
<!-- These are not -->
</md-card>
<!-- my fixed div -->
<md-card id="totals" ix-totalbar>
</md-card>
</div>
and their styles look something like this:
.searchResult{
box-sizing: border-box;
display: flex;
flex-direction: column;
}
#totalsbar{
position: fixed;
bottom: 55px;
}
So far, I've tried doing this with a directive called ixTotalbar, but it isn't working any way I try it, I tried adding all of the things in comments but none of them properly adjusted the size.
namespace incode.directives.label {
interface IScope extends ng.IScope {
}
export class IncodeTotalsBarDirective implements ng.IDirective {
restrict = 'AE';
public require: 'ngModel';
public scope: Object;
replace = true;
public link: ng.IDirectiveLinkFn | ng.IDirectivePrePost;
constructor() {
this.link = (scope: IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes, ctlr: any) => {
element.bind('load',
() => {
element.css({
width: element.siblings()[0].offsetWidth
});
window.addEventListener('resize',
() => {
console.log("window resized");
element.css({
width: element.siblings()[0].offsetWidth
});
});
element.siblings()[0].on('resize',
() => {
console.log("element resized");
element.css({
width: element.siblings()[0].offsetWidth
});
});
});
console.log("Element width: "+element.width().toString() + " Sibling Style: "+element.siblings()[0].style.toString());
}
}
public static factory(): ng.IDirectiveFactory {
var directive = () => new IncodeTotalsBarDirective();
//directive.$inject = ['$window'];
return directive;
}
}
angular.module('incode.module')
.directive('ixTotalbar', incode.directives.label.IncodeTotalsBarDirective.factory());
}
What's interesting is you can see some console.log()s, one of which output's the sibling's style, which I've verified is correct. However, the width isn't being set properly, so I don't understand what I need to do.

Answer 1

Might be similar to what you're looking for, but this is AngularJS 1. Since your comment said anything, here it is:
JS:
app.directive('bindToHeight', function ($window, $parse) {
return {
restrict: 'A',
link: function (scope, elem, attrs) {
var attributes = scope.$eval(attrs['bindToHeight']);
var targetElem = angular.element(document.querySelector(attributes[1]));
elem.css(attributes[0], targetElem.outerHeight());
angular.element($window).on('scroll', function() {
elem.css(attributes[0], targetElem.outerHeight());
});
angular.element($window).on('resize', function() {
elem.css(attributes[0], targetElem.outerHeight());
});
scope.$watch(function () {
return targetElem.outerHeight();
},
function (newValue, oldValue) {
if (newValue != oldValue) {
elem.css(attributes[0], newValue);
}
});
}
};
})
And HTML:
<div id="regularHeightItem"></div>
<div bind-to-height="['height', '#regularHeightItem']" id="height2"></div>
I utilized this for a placeholder which needed to maintain the same height as an element that switched to fixed when you scroll down, but it had dynamic content so it needed to be dynamic itself. You can change the $window.on() stuff based on what you need it to update on.