Ember 1.13 How to add classes to the root view?

[OrKoN]

The following was the way to style the root ember-view of an app http://emberjs.jsbin.com/yasukevoni/1/edit?html,js,console,output in Ember 1.13

Now Views are deprecated and I tried to follow the deprecation guide and migrate from using ApplicationView to using a component http://emberjs.jsbin.com/hekadobewa/edit?html,js,console,output But the new way is not equivalent to the old one because an extra view element is added:

Expected structure (from the first jsbin):

Actual structure (from the second jsbin):

How to migrate this case to Ember 1.13?

[joeruello]

I think this functionality has been lost. I assume we'll be able to create an application component when Routable Components are implemented.

A workaround until this is implemented may be to put the element with desired classes in your index.html, and then change the root element.

[sarus]

I'm confused by this too. Previously (< Ember 1.12.0) I was using views to add a class to the view's root DOM element. Something like this:

import Ember from "ember";

export default Ember.View.extend({
  classNames: ['account-view']
});

Now that views are deprecated I removed all of these view classes and just wrapped the "view" in the handlebars template with a div and added the class.

<div class="account-view">
{{!-- Existing Template Code --}}
</div>

After removing all views and getting rid of the deprecations (I even deleted the views folder out of my project) I noticed that the top level of the app is still wrapped by a div with the class ember-view.

Should this be gone now that views are deprecated or at least this class should be renamed?

Is it safe to apply a style to ember-view under the assumption that there will only be one in the application assuming I got rid of all my own views?

Thanks!

[sarus]

Just answering my own question you cannot style the class ember-view under the assumption that it only exists in the top level DIV wrapping the application as it shows up in components as well.

[Samsinite]

Couldn't one just be very specific in their selectors for styling:

body > .ember-view {
  ...
}

Or does this not work for styling the root ember view in the application?

Edit: That being said, this could require updating existing css to update from 1.12 to 1.13.

[sarus]

@Samsinite that does work =) I should have thought of it. So simple to fix haha. I would still argue that the class ember-view should be renamed since views are no longer supposed to exist though.

[stefanpenner]

@rwjblue let's add this today's agenda

[topaxi]

I just started on an application this Monday and needed to add an application view to add/change classes too 👍

[mixonic]

In 2.0 there will not be a solution for the specific case discussed here. There will be no way to add classes to the application view's element. You MUST use an additional DOM node inside the application template.

We discussed the issue in some detail today, and it seems this is a use case that will remain awkward until we land routable components. For users who absolutely require customization of the application view's element, I suggest using the ember-legacy-views addon. In 1.13, that addon will silence deprecation warnings regarding views, in 2.0 it will cause the API to continue being present. After routable components land, you should be able to safely migrate away from that addon.

I'm going to close this issue for now as a wontfix, but please feel free to comment or re-open if I have missed something significant!

[OrKoN]

@mixonic It looks like it's indeed possible in 2.0 http://stackoverflow.com/a/32013110/601499 Could you please comment if it can serve as a solution or if it should be avoided?

[rwjblue]

Using a component as ApplicationView will allow customization of classNames and whatnot, but is definitely going to have a number of negative results as well (for example controller is not correct).

This is definitely not a go forward solution, and there is nothing wrong with using the addon if you require this functionality.

[OrKoN]

@rwjblue Thanks for the comment! But what do you mean by controller is incorrect? I tried to access controller's properties and it looks ok to me: http://emberjs.jsbin.com/napedapuju/1/edit?html,js,console,output Anyway I have updated my answer with your comment.

[DanChadwick]

A few gotchas. First, there may be other top-level div's of class ember-view. For example, both ember-wormhole and ember-paper's paper-menu place divs at the top level (although only the later has this class). This makes selecting only the application view hierarchy with CSS difficult.

Using rootElement had negative side effects on ember-paper's menu handling, since it moves the listener down from the body to whatever div you create.

This leaves the legacy views add-on or difficult CSS classes until you can customize the root component in whatever version has routable components. Ugh.

EDIT: I ended up adding a class using a little jQuery in an afterRender run loop handler.

[davidlormor]

Just wanted to second the comments from @DanChadwick (and everyone else) - I'm using flexbox for much of my app layout, and not being able to target the root div of the app via a simple class or ID is a pain.

[Gaurav0]

@rwjblue @stefanpenner @mixonic Is it possible, given the loss of this functionality, to continue to support ember-legacy-views until Routable Components or some other way of implementing this lands?

[mixonic]

I need to state first that this feature (classes on the root) is not a feature of Ember 2.x. It was removed after 1.13, and though we support it via the legacy addon it is not in 2.x proper. But technicalities be damned, I agree the practicalities are most important here :-)

@Gaurav0 it is difficult to say that every stable release of Ember will have this feature between the loss of support for ember-legacy-views (when the glimmer refactor lands) and when we add support for routable components. I'll make sure people on core have it in mind (it impacts their apps as well) and see if there is any specific thought. I think it is safe to suggest we all want it to be possible to add classes on the root in each release of the LTS channel.

[himedlooff]

It would be really nice to not have to use body > .ember-view.

[mellatone]

This is extremely important.

[heyjinkim]

I'm having the issue with styling body > .ember-view when using ember-modal-dialog addon because the modal-dialog element is appended to the body tag that breaks the body > .ember-view style. This is hacky, but here's how I fixed.

app/index.html

<body>
  <div id="ember-application"></div>
</body>

config/environment.js

ENV.APP.rootElement = '#ember-application';

app.css

#ember-application > .ember-view {
  // do your style
}

[hoIIer]

@heyjinkim I think your answer is effectively the same as doing body > .ember-view {}

[topaxi]

@erichonkanen This may conflict with some addons, which append components into the body.

I ran into this issue myself and I am using the following selector: body > .ember-view:first-of-type

[Dynasty9]

I've got the pod structure but it should be the same for you guys, Under pods/application/view.js, I have Ember.Component.extend instead of Ember.View.extend. It looks like this:

import Ember from 'ember';
export default Ember.Component.extend({
    classNames : ["fill-space","viewport-table"]
});

It works for me 💃

[amk221]

@Dynasty9 Thanks for the solution.
Any problems with adding tagName: ''?

[rwjblue]

FWIW, the suggestion from #11486 (comment) will not work in Ember 2.7.

[amk221]

revert revert :) Thank you for the heads up.

[Dynasty9]

👍 noted

[kanongil]

Maybe reopen this issue now that ember-legacy-views is gone and routeable components are still MIA?

Currently I am doing it in application/view.js like this:

const TopLevelView = MyApp.__container__.lookupFactory('view:toplevel');

export default TopLevelView.extend({
  classNames: 'my-app-main'
});

[hoIIer]

@kanongil I just created an {{app-main}} component and it does the trick...

[justinaray]

@rwjblue you mentioned above that the trick of exporting a Component from view.js would not work in 2.7. However, it still seems to be fine in our 2.7 upgrade branch. Was this something that you wanted to address but didn't land in 2.7? Or is there a subtlety that isn't working that we're not noticing?

We don't like using this trick, but it has deferred the app-level styling rework we'd need to take on to account for the extra div in our dom. In this case, we don't need any controller guarantees ... just a hook for the styles.

[amk221]

Upgraded to 2.8.0 now, and obviously the tagName: '' view fix no longer works.
Wondering if this will be officially possible soon?
It's frustrating having to do this:

:root,
.ember-application,           // Class name Ember add's to it's `rootElement` (body)
.ember-application > div {    // Extraneous div for application view
  height: 100%;
}

[rohmann]

Ran into this today after updating. After fiddling with it, I got it to accept a component via using an instance initializer.

https://gist.github.com/rohmann/1df36a63f2c3905bc52ae373e771a129

[Redsandro]

@kanongil

Currently I am doing it in application/view.js like this:

Can you elaborate? Where is this application directory? What is MyApp?

[kanongil]

@Redsandro This method doesn't work any more.

[Kilowhisky]

Still not a workable solution? Its really quite difficult to do the height: 100% trick.

html, body {
height: 100%;
}

etc...

[humanchimp]

@Samsinite I realize you wrote that comment a very long time ago, but that solution only works if your root element is the only .ember-view in the body (which in our case, it is not)

[ChrizzDF]

Hey guys,
I ran into the same problem with some addon components, so
body > .ember-view {} and body > .ember-view:first-of-type didn't work.

I found a solution myself (at least for me):
body > [class="ember-view"] {}

This affects only the desired element because other addons always have additional classes besides .ember-view and the CSS selector is checking if the element has only this class.

Hopefully someone finds this also useful!

[blufish]

Amazing that Ember devs would not address this. Very ridiculous that you cannot control the controllers, must use them, and have Ember create a "ember-view" in the DOM.

Why do controllers not follow the component spec?

[kanongil]

This issue should be resolved once emberjs/rfcs#280 lands.

[blufish]

Excellent!! Sorry I didn't realize that was coming!