Menu
I´m using Angular Material 1.1.0 with UI-Router 1.0.0-beta.1 in my Angular 1.5 project and UI-Router seems to break flexbox functionality.
The index.html layout stretches and fills the container when it doesn't contain UI-Router element. When I add <div ui-view="container"></div> the layout breaks.
Flex is working when I have:
<body ng-app="app" layout="column" ng-cloak>
<div layout="row" flex>
<div flex class="red">First item in row</div>
<div flex class="blue">Second item in row</div>
</div>
</body>
When inspected it displays that flex class is added:
<div layout="row" flex= class="layout-row flex">
<div flex class="red flex">First item in row</div>
<div flex class="blue flex">Second item in row</div>
</div>
But when I add UI-Router, it displays two rows at the top of the page and elements aren't flexing vertically. The code in index.html:
<body ng-app="app" layout="column" ng-cloak>
<div class="gradient flex">
<div ui-view="container" flex></div>
</div>
</body>
And in container:
<div layout="row" flex>
<div flex class="red">First item in row</div>
<div flex class="blue">Second item in row</div>
</div>
When inspected it reveals flex class is missing:
<div class="gradient flex">
<!-- uiView: container -->
<div ui-view="container" flex class="ng-scope flex">
<stream class="ng-scope ng-isolate-scope">
<div layout="row">
<div flex class="red">First item in row</div>
<div flex class="blue">Second item in row</div>
</div>
</stream>
</div>
</div>
I'm aware that layout only affects the flow direction for that container's immediate children and UI-Router is adding <stream class="ng-scope ng-isolate-scope">. How I´m able to add the flex class to UI-Router views?
730
Without getting too far down the rabbit hole, I essentially fixed my issue using this convention:
<body ng-app="app" layout="column">
<!-- Top tool bar (top of screen) -->
<md-toolbar></md-toolbar>
<!-- This div holds both my sidenav and main content -->
<div flex layout="row">
<!-- This is my sidenav -->
<md-sidenav>...</md-sidenav>
<!-- This is my main content, fit into an ng-view element -->
<div flex ng-view></div>
</div>
So what's going on here? I want my toolbar (at the top) to be in-column with my sid-nav and main content. Since I'm treating <body> as my parent element, I give it the attribute of layout=column. Now that I have the toolbar on top and the <div> that holds both the side-nav and main content stacked underneath in a 'column,' I want to make this <div>a row so I can stack nav-bar and main content side-by-side. The parent <div> that holds these gets layout=row. The children of this <div> are the sidenav and main content, so they get the attribute flex. Notice that I didn't specify flex on the md-sidenav; Angular Material takes care of that for me. Whew. That was quite a bit. Look at that and see if it makes sense. I would also be delighted to help you figure this out on a JSFiddle or Plnkr. Just let me know!
71
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
