I've encountered a peculiar bug while trying to add a class to a ui-router element. When I apply the active class, an absolutely positioned element that spans the entire view suddenly snaps to the width of its parent.
To see the issue in action, check out the plunker example here
Here's a snippet of my code:
index.html
<body ng-controller="MainCtrl">
<header>
<span ng-click="toggleNav()">☰</span>
</header>
<nav ng-class="{active: navOpen}">
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</nav>
<section class="container" ui-view ng-class="{active: navOpen}"></section>
</body>
style.scss
nav {
position: absolute;
width: 100px;
height: 100%;
top: 25px;
left: 0;
background: gold;
transform: translateX(-100px);
transition: all .5s linear;
&.active {
transform: translateX(0);
}
}
.container {
width: 90%;
margin: 0 auto;
padding: 60px 0;
transition: all .5s linear;
&.active {
transform: translateX(100px);
}
div {
@extend header;
height: auto;
top: 25px;
background: deepskyblue;
padding: 10px;
section {
width: 90%;
margin: 0 auto;
span:last-child {
float: right;
}
}
}
}
app.coffee
app = angular.module 'plunker', ['ui.router']
app.config ($stateProvider) ->
$stateProvider
.state 'foo',
url: ''
templateUrl: 'foo.html'
app.controller 'MainCtrl', ($scope) ->
$scope.navOpen = false
$scope.toggleNav = ->
$scope.navOpen = !$scope.navOpen
If anyone can provide some insight into this issue, it would be greatly appreciated!
Solution Found: Adjusted the width and auto margin to 5% left and right padding