Size/Collapse state doesn't refresh about ui-layout

[wwn]

Hi all,

I've a similar question: If I set the size attribute as an scope variable based value, the initial size is rendered well. (e.g. The width of the ui-layout-container is correct.)

1. Now I move the divider and $watch size or inspect it in Firebug: the value of size never changes. (..but the witdh of course).

2. If I use the function setSize(), value of size changes, but the divider does not move.

How can I steer the divider position with changing value for size?

http://plnkr.co/edit/aqqRIX?p=info

Thx to all and have a nice weekend

[jbro-io]

Since ui-layout inherets the current scope all you need to do is call $scope.updateDisplay() in your controller.

Change your setSize function to the following and it works.

$scope.setSize = function (){
  $scope.sizeA ++;
  $scope.sizeB --;
  console.info($scope.sizeA + " " + $scope.sizeB)
  $timeout(function(){
    $scope.updateDisplay();  
  });
};

[erdillon]

Hmmm… I just tried that exactly, but it doesn’t resize consistently. I’ve got a $scope.$on(…) waiting on an event, see below.
If seems it needs to be called a few times to actually trigger the resize.

        $scope.$on('selectionChanged', function (event, selection) {
            if (selection) {
                $scope.viewerWidth = '750px';
                $scope.updateDisplay();
            }
        });

Any clue?
Eric

On Dec 2, 2014, at 6:55 PM, Jonathan Broquist [email protected] wrote:

Since ui-layout inherets the current scope all you need to do is call $scope.updateDisplay() in your controller.

Change your setSize function to the following and it works.

$scope.setSize = function (){
$scope.sizeA += 10;
$scope.sizeB -= 10;
console.info($scope.sizeA + " " + $scope.sizeB)
$scope.updateDisplay();
}
—
Reply to this email directly or view it on GitHub #58 (comment).

[jbro-io]

Wrap it in a $timeout function and that will solve your problem.

On Dec 2, 2014, at 10:56 PM, Eric Dillon [email protected] wrote:

Hmmm… I just tried that exactly, but it doesn’t resize consistently. I’ve got a $scope.$on(…) waiting on an event, see below.
If seems it needs to be called a few times to actually trigger the resize.

$scope.$on('selectionChanged', function (event, selection) {
if (selection) {
$scope.viewerWidth = '750px';
$scope.updateDisplay();
}
});

Any clue?
Eric

On Dec 2, 2014, at 6:55 PM, Jonathan Broquist [email protected] wrote:

Since ui-layout inherets the current scope all you need to do is call $scope.updateDisplay() in your controller.

Change your setSize function to the following and it works.

$scope.setSize = function (){
$scope.sizeA += 10;
$scope.sizeB -= 10;
console.info($scope.sizeA + " " + $scope.sizeB)
$scope.updateDisplay();
}
—
Reply to this email directly or view it on GitHub #58 (comment).

—
Reply to this email directly or view it on GitHub.

[wwn]

Hello all,
thx for answering. It seems with $scope.updateDisplay() I can achieve target 2).
http://plnkr.co/edit/aqqRIX?p=preview

But I've no clue to "bring back " a change of divider position to my $scope.size. I could select the divider and watch them left attribute and recalculate size of the boxes but I guess there is a better way.