control style of div-tag inserted by the ember engine

Question

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)

`document.documentElement.classList.add('full-height');` & `.full-height > div.ember-view { height: 100vh; }` — Josh Burgess, Aug 10 '15 at 14:51

Kit Sunde · Answer 1 · 2015-08-10T15:04:32.833

1

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;
}

edited Aug 10 '15 at 15:04

answered Aug 10 '15 at 14:51

Kit Sunde

35,972
25
125
179

Except he probably doesn't want this on every page, otherwise he could just use `.ember-view`. – Josh Burgess Aug 10 '15 at 14:52
@JoshBurgess `.ember-view` is added to all ember views, I'm pretty sure he's just trying to avoid targeting components and things. – Kit Sunde Aug 10 '15 at 14:54
Many good suggestions here. The Ember 2.0 path is deprecating Ember.View and I am planning to migrate my app to Ember 2.0 when it is released. So the safest bet is to use the `body > .ember-view` for now. Thanx! – Vilhelm H. Aug 11 '15 at 09:13

score 0 · Answer 2 · answered Aug 10 '15 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; 
}

score 0 · Answer 3 · answered Aug 10 '15 at 16:23

0

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.

answered Aug 10 '15 at 16:23

SeanK

667
7
16

That doesn't style the first sibling, it styles all of successive siblings. – Kit Sunde Aug 11 '15 at 09:06
@KitSunde, that's not correct, "it will select only the specified element that immediately follows the former specified element." See: https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors I think you're probably thinking of the general sibling selector '~' – SeanK Aug 11 '15 at 16:20

control style of div-tag inserted by the ember engine

3 Answers3