Geek Answers Handbook

Using Angular Component Breaks Material Layout

Having the following in index.html and the simple state of the ui router loading compoment as a template

<body ng-app="myApp" layout="column"> <div class="container" layout="row" flex ui-view> </div> </body>

A specific component using the following template stored in a file

 <md-sidenav md-is-locked-open="true" class="red">sidenav</md-sidenav> <md-content class="green" flex>content</md-content>

The generated code will be

  <body ng-app="myApp" layout="column"> <div class="container" layout="row" flex ui-view> <customizing> <md-sidenav md-is-locked-open="true" class="red">sidenav</md-sidenav> <md-content class="green" flex>content</md-content> </customizing> </div> </body>

The tag breaks the layout of the angular material. If I don't use a component, but just a view like this, the layout will be fine

 <body ng-app="myApp" layout="column"> <div class="container" layout="row" flex ui-view> <md-sidenav md-is-locked-open="true" class="red">sidenav</md-sidenav> <md-content class="green" flex>content</md-content> </div> </body>

Any ideas? I also found this post , but I cannot figure out how to use the component as an attribute. Is it possible?

See sample plnkr

+6
source share
3 answers

It works in Plunker.

index.html

 <div class="container" flex ui-view> <customizing layout="row" layout-fill></customizing> </div>

If you're curious about layout-fill , this is from online docs :

layout-fill causes the layout element to fill the parent container

Edit

For Plunker in the comment below try Plunker

customizing.html

 <div layout="row" layout-fill> <md-sidenav md-is-locked-open="true" class="red">sidenav</md-sidenav> <md-content class="green" flex>content</md-content> </div>

index.html

 <div class="container" flex ui-view> <customizing></customizing> </div>
+5
source

I'm a little tired of this, hope this post helps someone who stumbles upon this search in the future.

You might think that the components of ui-router or angular 1 will expose the class definition, but today you are mistaken, and it seems that they do not intend to add it. See https://github.com/angular/angular.js/issues/14800 .

However, you can open the $ element service to do what you need quite easily. According to the comments above, you need to add a class, such as layout-fill , to the host element of the component. You can also consider adding layout-column, layout-row or flex to preserve the existing structure of the internal structure of the material, as described in the angular-material documents . See the example below:

 // Using ES6(ES2015) to demonstrate export function SiteComponent() { return { controller: SiteController, templateUrl: 'app/site/site.html' }; } class SiteController { constructor( // expose the host element (ie: component element) using angular.IRootElementService $element ) { // add class to element (per angular-material) $element.addClass('layout-fill layout-column'); } } // This will result in a component markup that looks like this: // <site-component class="layout-fill layout-column">...<site-component>
+3
source

I had to use css to fix this. I'm still looking for a cleaner solution, like attaching a class using ui-router, for example. But at the moment, the following css works for me:

 ui-view > *, .ui-view-component-fix > * { margin: 0; width: 100%; min-height: 100%; height: 100%; flex-direction: row; box-sizing: border-box; display: flex; }

Do not think that this only works if the ui-view has only one child. Also, I find this a workaround.

See the plunker forked from your example: http://plnkr.co/edit/PBittn9UCd1DMaQs9iY2?p=preview

0
source

More articles:


All Articles