Skip to content
This repository was archived by the owner on May 29, 2019. It is now read-only.

docs(collapse): fix height on horizontal #6183

Closed
wants to merge 1 commit into from
Closed
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion src/collapse/docs/demo.html
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
<style>
.horizontal-collapse {
height: 70px;
}
</style>
<div ng-controller="CollapseDemoCtrl">
<button type="button" class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse Vertically</button>
<hr>
@@ -7,7 +12,7 @@

<button type="button" class="btn btn-default" ng-click="isCollapsedHorizontal = !isCollapsedHorizontal">Toggle collapse Horizontally</button>
<hr>
<div uib-collapse="isCollapsedHorizontal" horizontal>
<div class="horizontal-collapse" uib-collapse="isCollapsedHorizontal" horizontal>
<div class="well well-lg">Some content</div>
</div>
</div>
5 changes: 4 additions & 1 deletion src/collapse/docs/readme.md
Original file line number Diff line number Diff line change
@@ -27,8 +27,11 @@
<i class="glyphicon glyphicon-eye-open"></i>
_(Default: `false`)_ -
Whether the element should be collapsed or not.

* `horizontal`
<small class="badge">$</small> -
An optional attribute that permit to collapse horizontally.

### Known Issues

When using the `horizontal` attribute with this directive, keep in mind that due to how CSS can reflow as the collapse element goes from 0px to its desired end width, this cause result in issues with a changing height. This can cause animations to not appear to run. The best way around this is to set a fixed height via CSS on the horizontal collapse element so that this situation does not occur, and so the animation can run as expected.