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>

Я хочу, чтобы моя растяжка flexible-width-component автоматически заполняла промежуток между собой и fixed-width-component для любого разрешения шире, чем 1200px. Оба компонента должны отображаться рядом друг с другом.

Любые советы очень ценятся!


javascript css angularjs
person user90766    schedule 24.12.2013    source источник
comment
Пробовал min-width, max-width и медиа-запросы, не помогло.   -  person user90766    schedule 24.12.2013
comment
Если бы у меня не было компонента с фиксированной шириной, я бы использовал проценты для ширины div или классов скаффолдинга начальной загрузки.   -  person user90766    schedule 24.12.2013
comment
flexbox и опция?   -  person hitautodestruct    schedule 29.12.2013
comment
@hitautodestruct все еще не стандартизирован, поэтому мне неудобно его использовать, и я бы предпочел другие варианты, прежде чем использовать flexbox.   -  person user90766    schedule 30.12.2013
comment
Смотрите мой ответ ниже.   -  person hitautodestruct    schedule 13.08.2014

Ответы (2)


arrow_upward
15
arrow_downward

Вы можете получить свои родительские контейнеры 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' 
      });

    };
});

Вот демонстрация

person hitautodestruct    schedule 02.01.2014

arrow_upward
1
arrow_downward

Я знаю, что очень поздно отвечать на этот вопрос, но это может помочь другим.

Рабочий jsfiddle

<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>
person Akash Babu    schedule 29.08.2017