Angularjs adjust width based on parent element width

angularjs, css, javascript

Solution

You can get your parent containers `offsetWidth` and subtract your fixed width from it:

var example = angular.module('exmp', []);

example.directive('flexibleWidth', function() {
    return function(scope, element, attr) {

      // Get parent elmenets width and subtract fixed width
      element.css({ 
        width: element.parent()[0].offsetWidth - 400 + 'px' 
      });

    };
});

Here's a demo

Problem

I'm using AngularJS & Bootstrap, and have the following structure: ``` <parent-div> <flexible-width-component class="pull-left" style="display: inline-block; min-width: 700px;">Data grid with many columns </flexible-width-component> <fixed-width-component class="pull-right" style="width:400px; display: inline-block"> </fixed-width-component> </parent-div> ``` I wish to have my `flexible-width-component` stretch to automatically fill the gap between itself and the `fixed-width-component`, for any resolution wider than `1200px`. Both components need to be displayed adjacent to each other. Any advice greatly appreciated!

Original source