javascript – Angularjs根据父元素宽度调整宽度

前端之家收集整理的这篇文章主要介绍了javascript – Angularjs根据父元素宽度调整宽度前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用AngularJS& Bootstrap,并具有以下结构:
<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>

我希望我的柔性宽度分量拉伸能够自动填充自身与固定宽度组件之间的间隙,适用于宽度超过1200px的任何分辨率.
两个组件都需要彼此相邻显示.

任何建议非常感谢!

解决方法

您可以获取父容器offsetWidth并从中减去固定宽度:
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' 
      });

    };
});

这是a demo

猜你在找的JavaScript相关文章