Skip to content

Commit

Permalink
fix(uiGrid): Add relatively-positioned wrapper
Browse files Browse the repository at this point in the history
All contents inside the grid are now wrapped in an element that has
relative positioning. This means that any absolutely-positioned elements
are positioned relative to the grid and not the page, which fixes some
issues with IE9

Fixes #3412
  • Loading branch information
c0bra committed May 26, 2015
1 parent b33d962 commit 9b2c6d5
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 17 deletions.
9 changes: 8 additions & 1 deletion src/less/grid.less
Original file line number Diff line number Diff line change
Expand Up @@ -51,4 +51,11 @@

.ui-grid-invisible {
visibility: hidden;;
}
}

// Wraps the contents inside the grid directive with a relatively-positioned element so that all absolute elements are positioned relative to the grid, and not the page
.ui-grid-contents-wrapper {
position: relative;
height: 100%;
width: 100%;
}
34 changes: 18 additions & 16 deletions src/templates/ui-grid/ui-grid.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div ui-i18n="en" class="ui-grid">
<div ui-i18n="en" class="ui-grid">
<!-- TODO (c0bra): add "scoped" attr here, eventually? -->
<style ui-grid-style>
.grid{{ grid.id }} {
Expand All @@ -25,26 +25,28 @@
{{ grid.customStyles }}
</style>

<div ui-grid-menu-button ng-if="grid.options.enableGridMenu"></div>
<div class="ui-grid-contents-wrapper">
<div ui-grid-menu-button ng-if="grid.options.enableGridMenu"></div>

<div ng-if="grid.hasLeftContainer()" style="width: 0" ui-grid-pinned-container="'left'"></div>
<div ng-if="grid.hasLeftContainer()" style="width: 0" ui-grid-pinned-container="'left'"></div>

<div ui-grid-render-container
container-id="'body'"
col-container-name="'body'"
row-container-name="'body'"
bind-scroll-horizontal="true"
bind-scroll-vertical="true"
enable-horizontal-scrollbar="grid.options.enableHorizontalScrollbar"
enable-vertical-scrollbar="grid.options.enableVerticalScrollbar">
</div>
<div ui-grid-render-container
container-id="'body'"
col-container-name="'body'"
row-container-name="'body'"
bind-scroll-horizontal="true"
bind-scroll-vertical="true"
enable-horizontal-scrollbar="grid.options.enableHorizontalScrollbar"
enable-vertical-scrollbar="grid.options.enableVerticalScrollbar">
</div>

<div ng-if="grid.hasRightContainer()" style="width: 0" ui-grid-pinned-container="'right'"></div>
<div ng-if="grid.hasRightContainer()" style="width: 0" ui-grid-pinned-container="'right'"></div>


<div ui-grid-grid-footer ng-if="grid.options.showGridFooter"></div>
<div ui-grid-grid-footer ng-if="grid.options.showGridFooter"></div>

<div ui-grid-column-menu ng-if="grid.options.enableColumnMenus"></div>
<div ui-grid-column-menu ng-if="grid.options.enableColumnMenus"></div>

<div ng-transclude></div>
<div ng-transclude></div>
</div>
</div>

0 comments on commit 9b2c6d5

Please sign in to comment.