disableToggle and collapsed both being ignored?

dannycallaghan commented 8 years ago

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

garymazz commented 8 years ago

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

garymazz commented 8 years ago

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

garymazz commented 8 years ago

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;">

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

bampakoa commented 8 years ago

@garymazz Try to set collapsed from a variable:

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

chrislatina commented 8 years ago

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

bampakoa commented 8 years ago

@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;">

chrislatina commented 8 years ago

@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?

bampakoa commented 8 years ago

Which angular version do you use?

chrislatina commented 8 years ago

Ah! Using Angular 1.4.8

bampakoa commented 8 years ago

@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.

chrislatina commented 8 years ago

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

bampakoa commented 8 years ago

@chrislatina Glad you have solved it!

goranbjelanovic commented 8 years ago

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

bampakoa commented 8 years ago

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

danwf commented 8 years ago

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.

bampakoa commented 8 years ago

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

8bitsquid commented 8 years ago

@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.

kumaril-telsiz commented 8 years ago

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-container id="tableSection">
    <div id="tableContent" class="main-content-table-block">
      <vip-table table-object="table"></vip-table>
    </div>
  </div>
</div>`

bampakoa commented 8 years ago

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

kumaril-telsiz commented 8 years ago

@bampakoa Thank you for a quick response.

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

`

<div ui-layout-container collapsed="layout.mycontainer"></div>

`

$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 };

`

  <div ui-layout-container id="tableSection"  collapsed="layout.tableContainer">
    <div id="tableContent" class="main-content-table-block">
      <vip-table table-object="table"></vip-table>
    </div>
  </div>
</div>`

Am I doing something wrong here?

bampakoa commented 8 years ago

@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.

pieterjandesmedt commented 8 years ago

@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...

bampakoa commented 8 years ago

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

pieterjandesmedt commented 8 years ago

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.

goranbjelanovic commented 7 years ago

@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.

bampakoa commented 7 years ago

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

goranbjelanovic commented 7 years ago

@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.

bampakoa commented 7 years ago

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!

goranbjelanovic commented 7 years ago

@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.

bampakoa commented 7 years ago

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.

savras commented 7 years ago

Works if we use ui-layout-loaded in the latest version (1.4.3)

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

angular-ui / ui-layout

disableToggle and collapsed both being ignored? #183