CODEWITHSUNDEEP
javascripthtmlcssember.js
omerjerk
omerjerk

Reputation: 4289

set CSS properties of an ember-view div

I've set the height of the <body> tag in my ember application to 100vh. Now inside my application/template.hbs, I have a root <div> in there. I'm unable to set the height of this root <div> to 100vh because when the application is finally rendered, the dom is as follows:

<body>
    This is 100% of viewport
    <div id="ember435" class="ember-view">
        This div was automatically generated by ember, and I can't change its height. :/
        <div id="wrapper">This is my div and not 100% of body</div>
    </div>
</body>

Upvotes: 1

Views: 446

Answers (2)

Ebrahim Pasbani
Ebrahim Pasbani

Reputation: 9396

You can define insertion point of the app.

//index.html
<body>
    {{content-for "body"}}

    <script src="{{rootURL}}assets/vendor.js"></script>
    <script src="{{rootURL}}assets/client-web-ember.js"></script>

    <div id="my-app"></div>

    {{content-for "body-footer"}}
  </body>

And in 

// config/environment.js
ENV.APP.rootElement = '#my-app';

Then style anything based on the root element.

Upvotes: 0

Ember Freak
Ember Freak

Reputation: 12872

.ember-view will be included for all ember component by default. so you can try the below

body > .ember-view{
  height : 100%;
}

Refer for information. https://github.com/emberjs/ember.js/issues/11486

Upvotes: 3

Related Questions