5

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>

enter image description here

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>

enter image description here

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?

Improve this question
2
  • Have you tried using the class notation of angular material instead of attributes? They changed to the former some time ago (before the stable release) just because this kind of problems with transclusion. I mean using class="layout-row" and class="flex" instead of what you do. Commented Dec 6, 2016 at 15:49
  • I changed like this but the result was the same: <div class="red flex">First item in row</div> Thanks for the suggestion! Commented Dec 7, 2016 at 7:51

1 Answer 1

Reset to default
1

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!

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.