Styling the main outlet in Ember

Question

I have a layout that requires the main outlet to be 100% of the height of the page.

Here's a JSFiddle showing the issue I'm having. I can create the index view and assign css classes to it via the classNames property, but there is always that root div that I don't understand how to style.

http://jsfiddle.net/kgnQz/

Here is what the body looks like from the jsfiddle

<div id="ember153" class="ember-view"> <!-- Need style here -->
    <script id="metamorph-0-start" type="text/x-placeholder"></script>
        <div id="ember161" class="ember-view indexViewClass">
            This is the index view
        </div>
    <script id="metamorph-0-end" type="text/x-placeholder"></script>
</div>

Normally when I create a view, I can provide classaNames: ['whatever'] to apply CSS classes, but how do I go about styling the main outlet to be 100% of the page?

Things I have tried:

Creating an application view, however it is still wrapped by the main outlet code.
Using rootElement in Ember.Application.create({}); to specify a styled element, however that just inserts a child view where all my content goes that is 100% and creates a parent div with the same problem, just one level deeper.
Creating an application view and styling that in the same way I am styling the IndexView.

I tried researching this and it's a tough one for me to figure out... any ideas? I must be missing something simple because every time I figure something out i realize i was over-analyzing it or forcing Ember to do something in a way it wasn't mean to be done.

score 10 · Answer 1 · answered Jul 23 '15 at 19:20

10

any alternatives to Ember.View because it is deprecated and will be removed in ember 2

answered Jul 23 '15 at 19:20

Mohamed Zaghloul

345
2
9

score 6 · Accepted Answer · edited May 31 '13 at 17:59

6

you can use ApplicationView to style your main div...

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

See http://jsbin.com/uxojek/5/edit

 <div id="ember156" class="ember-view test">
    <script id="metamorph-0-start" type="text/x-placeholder"></script><div       id="ember164" class="ember-view indexViewClass">
   This is the index view 
 </div><script id="metamorph-0-end" type="text/x-placeholder"></script>
 </div>

edited May 31 '13 at 17:59

Mike Grassotti

19,040
3
59
57

answered May 31 '13 at 17:47

selvagsz

3,852
1
24
34

Awesome... i must have messed something up when i tried that because i updated my JSFiddle with an ApplicationView and voila, works... thank you. Here's an updated JSFiddle with styling so you can see it better http://jsfiddle.net/kgnQz/6/ – deadbabykitten May 31 '13 at 17:50

score 1 · Answer 3 · answered May 31 '13 at 17:48

1

To style the main application view you can actually provide your own ApplicationView for Ember to use.

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

answered May 31 '13 at 17:48

jayphelps

15,276
3
41
54

Styling the main outlet in Ember

3 Answers3