CODEWITHSUNDEEP
javascriptangularjslayoutangular-ui
Soorya Prakash
Soorya Prakash

Reputation: 991

Angular ui-layout toggle not working

Angular Version - 1.4.7 Ui-Layout Version - 1.4.1 Plunkr Link - Ui-layout Collapse problem

<div ui-layout-container id="main1" size="20%" min-size="20%">
  One
</div>
<div ui-layout-container id="main2" size="80%" min-size="80%">
  Two
  <div ui-layout="config2">
    <div ui-layout-container id="child1" size="80%" min-size="80%">
      <br/> Three
    </div>
    <div ui-layout-container id="child2" size="20%" min-size="20%">
      Four
    </div>
  </div>
</div>

Collapse of section "two" in the plunkr example is not working using the toggle button in the one|two splitter. Likewise Collapse of section "four" in the plunkr example is not working using the toggle button in the three|four splitter. Please help

Upvotes: 2

Views: 815

Answers (2)

Damon Friendship
Damon Friendship

Reputation: 781

Seems there's a bug in ui-layout so it won't collapse the right hand side or bottom panels.

Here's the updated Plunkr with a fix UI-Layout Collapse Fix

I've added this on line 529 of ui-layout1.4.1.js ...

prevContainer.uncollapsedSize = null;

Upvotes: 2

Shal
Shal

Reputation: 1

This is late but I think I know the answer.

UI-Layout only allows you to drag when the min/max sizes are possible. For example, if you have min-size:"20%" max-size="20%", you won't be able to drag at all, because there's no flexibility within the range.

Thus if you set two neighboring ui-layout-containers to each have min-size 20% and 80%, of course you won't be able to drag--there's no where the two divs can go that fulfill both min-sizes.

Upvotes: 0

Related Questions