Angularjs基于父元素的宽度调整宽度 [英] Angularjs adjust width based on parent element width

问题描述

我使用AngularJS和放大器;引导，并具有以下结构：

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>

我希望有我的灵活的宽度组件舒展开来自动填充本身和固定宽度的组件，任何分辨率比 1200像素宽。
两个组件需要显示彼此相邻。

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.

任何意见很大AP preciated！

Any advice greatly appreciated!

推荐答案

您可以得到你的父容器 offsetWidth 并从中减去你的固定宽度：

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

    };
});

这里的<大骨节病> 一个演示

这篇关于Angularjs基于父元素的宽度调整宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！