CODEWITHSUNDEEP
cssangularjsangularheightgolden-layout
Everything Matters
Everything Matters

Reputation: 2730

Angular 2 and golden layout height not issue - not accepting percentage height

I am facing a tough issue with angular 2 and golden layout component not accepting height as percentage. (but styling the width to 100% works). Any help is much appreciated.

Plunker as in here : http://plnkr.co/edit/tUQOev?p=preview

@Component({
  selector: 'my-app',
  providers: [TestService],
  template: `
    <div>
      <h2>Value: {{testService.testValue}}</h2>
      <div><button (click)="testService.add()">Change Value</button></div>
      <div style class="layout" gl></div>
    </div>
  `, 
  styles: [
    `
    .layout{ width:100%; height:100%}
    `
  ]
  directives: [GlDirective]
})
  1. When I give the layout: Width : 100%; height : 400px - it works fine as below

  1. But when I try to give height : 100% layout simply does not recognize height and does not render correctly.

Many thanks in advance.

Upvotes: 2

Views: 1027

Answers (1)

Steven Love
Steven Love

Reputation: 153

Your Plunker isn't working for me, but this looks a lot like standard CSS 100% height trickery.

Instead of using height:100% try using height:100vh

When you use height:100% you're saying the element should have the same height as its parent, but parent elements by default start off with 0 height and grow to fit their contents. So you end up with parent basing its height off the child and the child basing its height off the parent. Confusing, right? So it only works out if one of them uses a fixed height like when you used height:400px or something like height:100vh which means "as tall as the screen".

You can also check out This Stackoverflow Question with more answers regarding the same issue.

Upvotes: 0

Related Questions