Возникла проблема при масштабировании страницы средствами браузера (например, для Iceweasel/Firefox
, Chrome/Chromium
по сочетаниям клавиш: "Ctrl" + "-", "Ctrl" + "+", "Ctrl" + "0"
, либо через меню браузера) при использовании flexbox
. Масштабируется все, кроме блока panel-content
.
Также используются AngularJS, angular-gridster.js, Bootstrap 3.
Код:
<div ng-app="someApp" ng-controller="someCtrl" style="background-color: red; width: 100%;">
<div gridster="gridsterOpts">
<ul>
<li class="" gridster-item="block" ng-repeat="block in sorted_blocks">
<div class="panel panel-default" style="background-color: blue;">
<div class="panel-heading" style="background-color: green;">{{ block.title }}</div>
<div class="panel-content image-responsive" style="background-color: yellow;"
ng-style="{'background-image':'url(' + block.image + ')'}"></div>
</div>
</li>
</ul>
</div>
</div>
Контроллер:
angular.module('someApp', ['gridster']).controller('someCtrl', function ($scope, $http) {
$scope.gridsterOpts = {
resizable: {
enabled: false
},
columns: 10
};
$scope.sorted_blocks = [{
id: 1,
sizeX: 3,
sizeY: 3,
image: 'http://i.imgur.com/NI1Xm16.jpg',
title: 'название1',
row: 0,
col: 3
}, {
id: 2,
sizeX: 3,
sizeY: 3,
image: 'http://i.imgur.com/x6qmeUY.jpg',
title: 'название2',
row: 0,
col: 0
}];
});
Стили
body {
overflow: hidden;
}
.panel {
display: flex;
flex-flow: column nowrap;
height: 100%;
}
.panel .panel-content {
flex-grow: 1;
}
.image-responsive {
background-size: contain;
background-repeat: no-repeat;
}
Код на JSFiddle: http://jsfiddle.net/qqzvjvfx/9/ Для наглядности выделил разными цветами блоки.
Во всех примерах, например, здесь http://html5.by/blog/flexbox/ с масштабированием проблем нет, однако там используется чистый flexbox
.
При использовании angular-gridster.js
без flexbox
также с масштабированием проблем нет, официальный пример
Если я убираю вот этот стиль
.panel .panel-content {
flex-grow: 1;
}
тогда блок panel-content
(желтый) соответственно скрывается, т.к. в нем нет контента. Блок panel
(синий) остается того же размера, однако масштабирования по-прежнему не происходит, из чего можно сделать выводы, что проблема именно в блоке panel
.
Обновление: Если убрать стили flexbox http://jsfiddle.net/qqzvjvfx/10/ (изображение, конечно, пропадает), то масштабирование все равно не работает.