ui-layout disableToggle and collapsed both being ignored?

Forked the Holy Grail demo, and can't get either the collapsed attribute, or the disableToggle option to work. What am I missing?

http://plnkr.co/edit/wVp0PvbC3x4NpoSlEsin?p=preview

Jan 26 '16 13:01 dannycallaghan

I'm seeing the same thing.. :( No Joy

Feb 17 '16 02:02 garymazz

To fix disableToggle add/merge 'ui-layout.css' to css inventory.

Feb 17 '16 15:02 garymazz

collapse attribute is broken using angular 1.4.9 and 1.5.0:

<div ui-layout-container collapsed="true" class="ui-layout-west dashboardPalette" style="overflow-x: visible;">

Error: [$compile:nonassign] http://errors.angularjs.org/1.5.0/$compile/nonassign?p0=true&p1=collapsed&p2=uiLayoutContainer H/<@http://localhost:8383/COP-UI/libs/angular/angular.min.js:6:416 Ec/this.$get</ia/</s<@http://localhost:8383/COP-UI/libs/angular/angular.min.js:79:1 Ec/this.$get</ia/</l@http://localhost:8383/COP-UI/libs/angular/angular.min.js:80:63 tf/this.$get</m/c<@http://localhost:8383/COP-UI/libs/angular/angular.min.js:124:1 tf/this.$get</l/e<@http://localhost:8383/COP-UI/libs/angular/angular.min.js:124:373 uf/this.$get</m.prototype.$digest@http://localhost:8383/COP-UI/libs/angular/angular.min.js:138:261 uf/this.$get</m.prototype.$apply@http://localhost:8383/COP-UI/libs/angular/angular.min.js:141:339 g@http://localhost:8383/COP-UI/libs/angular/angular.min.js:94:137 t@http://localhost:8383/COP-UI/libs/angular/angular.min.js:98:260 fg/</u.onload@http://localhost:8383/COP-UI/libs/angular/angular.min.js:99:297

http://localhost:8383/COP-UI/libs/angular/angular.min.js Line 114

Feb 17 '16 15:02 garymazz

@garymazz Try to set collapsed from a variable:

<div ui-layout-container collapsed="layout.isCollapsed" class="ui-layout-west dashboardPalette" style="overflow-x: visible;">

Mar 02 '16 09:03 bampakoa

I also tried setting collapsed from a variable but it still does not work

Mar 07 '16 18:03 chrislatina

@chrislatina You actually have to create an object:

$scope.layout = {
    isCollapsed: true
}

and then:

<div ui-layout-container collapsed="layout.isCollapsed" class="ui-layout-west dashboardPalette" style="overflow-x: visible;">

Mar 07 '16 19:03 bampakoa

@bampakoa yes I did this but with no luck... I used bower install angular-ui-layout#bower, which simply gave me ui-layout.css, ui-layout.js, ui-layout.min.js. Maybe I need to just use the github version?

Mar 07 '16 21:03 chrislatina

Which angular version do you use?

Mar 07 '16 22:03 bampakoa

Ah! Using Angular 1.4.8

Mar 08 '16 01:03 chrislatina

@chrislatina You can check out my working plunker that is using Angular 1.4.9 and the latest version of ui-layout. I hope it solves your problem.

Mar 08 '16 08:03 bampakoa

Got it working! Looks like the bower install version is different from the most recent source code on github! Thanks for the plunker

Mar 10 '16 16:03 chrislatina

@chrislatina Glad you have solved it!

Mar 10 '16 16:03 bampakoa

@bampakoa Something seems wrong with your plunker example. Four Div is opened on 'Close Four' button and closed on 'Open Four' button.

Apr 14 '16 14:04 goranbjelanovic

Thanks @goranbjelanovic ! The collapsed flag of the 4th div was the other way round.

Apr 14 '16 19:04 bampakoa

Hi, I'm having the same issue with Angular v1.5.5 and the latest ui-layout source code from github. 'size' is being ignored as well.

Apr 28 '16 18:04 danwf

@danwf I tried with 1.5.5 version but I cannot see any problem. Can you elaborate on that a bit?

May 11 '16 08:05 bampakoa

@danwf If you're installing through bower, be sure to just use angular-ui-layout and not angular-ui-layout#bower like the first example in the README. The bower branch is and old build - 1.0.5. I ran into the same issue with Angular 1.5.5; no errors, it just wouldn't collapse. After installing angular-ui-layout 1.4.2 everything collapsed properly.

May 19 '16 20:05 8bitsquid

I see this error in the console when I add collapsed="true". Expression 'true' used with directive 'uiLayoutContainer' is non-assignable!

I am using 1.4.2 version of angularI ui layout and and angular 1.4.5, I hope this version is not an issue.

Here is my HTML <div ui-layout> <div ui-layout-container id="chartSection" collapsed="true"> <div class="clearfix main-content-chart-block"> <div class="main-content-chart"> <div class="chart-wrapper"> <vip-chart class="vip-chart" data-chart-object="dpiChartObject"></vip-chart> </div> </div> <div class="main-content-legends"> <vip-custom-legends ng-if="dpiChartObject.chartConfig.series.length" data-chart-object="dpiChartObject" data-table-object="table" data-position="right"></vip-custom-legends> </div> </div> </div> <div ui-layout-container id="tableSection"> <div id="tableContent" class="main-content-table-block"> <vip-table table-object="table"></vip-table> </div> </div> </div>

May 20 '16 23:05 kumaril-telsiz

@kumaril-telsiz you have to use an object property of the controller in replacement of true variable such as vm.layout = { collapsed = true };

May 21 '16 07:05 bampakoa

@bampakoa Thank you for a quick response.

Sorry for the inaccurate post ..... I meant I had tried both ways as per the example

`

$scope.layout { toolbar: true, leftSidebar: false, mycontainer: false }

The first one gives the error I mentioned and the second one does not give the error, but still does not close the container on load. Here is the second way I tried

$scope.layout = { chartContainer: false, tableContainer: true };

Am I doing something wrong here?

May 21 '16 18:05 kumaril-telsiz

@kumaril-telsiz could you provide a plunker with your full source code or alternatively you can check this plunker of the holy-grail demo that I have created. Also note that, as @danwf mentions in a post above, there is a problem with the version of the angular-ui-layout from the bower package.

May 21 '16 19:05 bampakoa

@bampakoa This is a plunker based on your plunker. I commented out these lines:

      vm.config = {
        flow: 'column',
      //  disableToggle: 'true',
      //  dividerSize: 0
      };

and added {{vm.layout}} to panel Three-One.

As you can see, clicking the dividers of the One and Four panels changes nothing in vm.layout.

I would expect vm.layout to reflect the current layout situation...

Sep 15 '16 13:09 pieterjandesmedt

@pieterjandesmedt you have to use the event ui.layout.toggle and update vm.layout explicitly.

Sep 15 '16 13:09 bampakoa

But why? Shouldn't there be two-way data binding? How can another component know what the layout state is if a user toggles the panel using the divider buttons?

Also: it doesn't matter if you set

      vm.layout = {
        one: false,
        four: false
      };
...
      $scope.$on('ui.layout.loaded', function(){
        $timeout(function(){
          vm.layout.one = true;
          vm.layout.four = true;
        });
      })

or

      vm.layout = {
        one: true,
        four: true
      };
...
      $scope.$on('ui.layout.loaded', function(){
        $timeout(function(){
          vm.layout.one = false;
          vm.layout.four = false;
        });
      })

the result is exactly the same. This leads to very confusing situations, see this updated plunker.

Sep 15 '16 14:09 pieterjandesmedt

@pieterjandesmedt , @bampakoa I'm experiencing the same problem if divider buttons are enabled. Using event ui.layout.toggle doesn't help eather. After couple of clicking on divider buttons or toggle/open/close panels stops opening/closing.

Oct 24 '16 14:10 goranbjelanovic

@goranbjelanovic can you give us a plnkr with the code that uses ui.layout.toggle event?

Oct 24 '16 20:10 bampakoa

@bampakoa Here is the plunker with the issue. I see couple of problems. First on ui.layout.loaded I set vm.layout.one = false; but layout one is initially open not closed. Second problem is if I close first panel with divider buttons and then click 'Open One' nothing happens.

Oct 25 '16 08:10 goranbjelanovic

For vm.layout.one to be initially closed, you have to set the collapsedproperty to true either in the layout object or inside your ui.layout.loaded event.
That seems to work if you solve the 1st problem. But please advised that when you use divider buttons to toggle layout panes, you should take into account this event and programmatically update the collapsed property by yourself!

Oct 25 '16 09:10 bampakoa

@bampakoa Yeah, first problem isn't actually a problem. It works as expected. About the second I believe I handle ui.layout.toggle event: $scope.$on('ui.layout.toggle', function(e, container){ console.log(container); if (container.id === '1') { vm.one = container.size > 0; } }); And if I close first panel with divider buttons and then click 'Open One' nothing happens. Could you update plunker so that this set of action works.

Oct 25 '16 10:10 goranbjelanovic

A minor typo in your code vm.one -> vm.layout.one. Nevertheless, even if you change this typo, it seems that the event is not working correctly by itself (it closes and opens automatically all the time). Maybe you should implement a mechanism that checks the initiator of the toggle event, to prevent this behavior. I did not have much time to find any reliable solution for this problem. In case you find one, it would be nice if we could take a look.

Oct 25 '16 12:10 bampakoa

ui-layout ui-layout copied to clipboard

disableToggle and collapsed both being ignored?

ui-layout
ui-layout copied to clipboard