CODEWITHSUNDEEP
angularjsangular-material
gmodrogan
gmodrogan

Reputation: 323

Using angular component breaks material layout

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

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

Defined 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>

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 angular material layouting. If I don't use a component, but just a view like this, the layout will be ok

<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? Also I found this post, but I can't figure out how to use the component as an attribute. Is it possible?

See plnkr sample

Upvotes: 8

Views: 2723

Answers (3)

Chase Oliphant
Chase Oliphant

Reputation: 389

I racked my brain on this for a while, hopefully this post helps someone who stumbles upon this search in the future.

You might think that ui-router or angular 1 components would expose a class definition but as of today you'd be wrong and it doesn't seem like they intend to add it either. See https://github.com/angular/angular.js/issues/14800.

However, you can expose $element service to do what you need fairly easily. As per comments above you need to add a class like layout-fill to your component's host element. You may also want to consider adding layout-column, layout-row or flex to keep the existing inner material layout structure, as described in the angular-material docs. See 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>

Upvotes: 3

Benjamin Geese
Benjamin Geese

Reputation: 35

I had to use css to fix that. I am still looking for a cleaner solution, like attaching a class using ui-router. But for now, 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;
}

Take not that this only works if ui-view has only one child. Furthermore, i consider this a workaround only.

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

Upvotes: 0

camden_kid
camden_kid

Reputation: 12813

This works okay in Plunker

index.html

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

If you are wondering about layout-fill, this is from the online docs:

layout-fill forces the layout element to fill its parent container

Edit:

For the Plunker in your comment below try this 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>

Upvotes: 5

Related Questions