Angularjs adjusts the width based on the width of the parent element

Question

I use AngularJS and 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 want my stretch flexible-width-component automatically fill the gap between itself and fixed-width-component , for any resolution larger than 1200px . Both components should be displayed next to each other.

Any advice is greatly appreciated!

Answer 1

You can get the parent containers offsetWidth and subtract a 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 is a demo

Answer 2

I know that it is very late to answer this question, but it can help others.

Jsfiddle work

 <div class="parent border"> <div class="fixed-component border"> Fixed Component </div> <div class="flexible-component border"> flexible component </div> </div> <style> .parent { height: 100px; display: flex; } .flexible-component { flex: 1; } .fixed-component { width: 100px; } .border { border: 1px solid black; } </style>