control style of div-tag inserted by the ember engine

283 Views Asked by Vilhelm H. At 10 August 2015 at 14:47

I want my ember app to fill the height of the viewport. It doesn't work as expected because ember puts in a div that I cannot control bewteen the body tag and my first tag in my application.hbs.

My application.hbs:

<div class='page'>
{{outlet}}
</div>

My Css:

body {
  background-color: #ccddee;
  height: 100vh;
  min-height: 100vh;
  margin: 0px;
}
.page {
  width: 780px;
  height: 100%;
  background-color: #F7F7F7;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
}

But the rendered html is:

<html>
  <body ...>
    <script ....>
    <div id="ember376" class="ember-view">
      <div class=page">
        ......
      </div>
    </div>
  </body>
</html>

I cannot control the style of the first div after the script element. ("ember-view" is used by many other tags as well, and "ember376" I am assuming may change to another number without my control.)

I am using the newest ember version (1.13.5)

Original Q&A

There are 3 best solutions below

Kit Sunde On 10 August 2015 at 14:51

If you want to add a class specifically to the applications view element you can do this:

App.ApplicationView = Ember.View.extend({
  classNames: ['full-height']
});

Then css:

.full-height {
    height: 100vh;
}

Or you could just target the first .ember-view with the direct-descendant selector in CSS:

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

Josh Burgess On 10 August 2015 at 14:53

Minimal JS answer. In your view template or in your application js, add this following JavaScript:

document.documentElement.classList.add('full-height');

And then define your full-height CSS for that class on the element you want to target, (example below)

.full-height > div.ember-view { 
  height: 100vh; 
}

SeanK On 10 August 2015 at 16:23

If all you want to do is style the first div after the script tag then you should be able to use the Adjacent Sibling Selector in CSS.

script + div {
  ...
}

I'm not certain this would be such a good idea, however, as I don't think you can assume the 'ember-view' div will always be the first div after the script tag.

control style of div-tag inserted by the ember engine

There are 3 best solutions below

Related Questions in CSS

Related Questions in EMBER.JS

Related Questions in EMBER-ENGINES

Trending Questions

Popular # Hahtags

Popular Questions