ember application template classname

Question

I'm having a similar problem to this one:

Setting tagName on application template in ember js

While I agree that falling back to a legacy view addon can't be the way to go, here too my bootstrap-based CSS is broken by the enclosing div (the height being not set, to be precise).

Now a different way to achieve what I need is to set the enclosing div's classNames property (if it exists), like it can be done with a component:

export default Ember.Component.extend({
    classNames: ['container']
});

Thus I could apply height:100%, and everything would be fine.

Update: The problem is not the styling of the enclosing div of a component, but the way the main application template behaves. Let me clarify:

application.hbs:

{{outlet}}

Therein is rendered a route's template, e.g. map.hbs:

{{#tab-navigation-container}}    
    {{top-nav}}

    {{tab-contentpane model=model}}

    {{tab-navigation map=true}}
{{/tab-navigation-container}}

Now, components/tab-navigation-container.js transforms the enclosing div to include the container CSS class:

import Ember from 'ember';

export default Ember.Component.extend({
    classNames: ['container']
});

However, the rendered HTML looks like this:

So, seemingly application.hbs puts another div around the component, and I'm looking for a way to either

• remove it (which can only be achieved by a legacy view addon, as explained in the link above) or
• apply a className to it.

Can it be done? Thanks!

Answer 1

Okay, this is more of an ugly hack than an actual solution, but for the moment it does the trick. I just fell back to ordinary jQuery DOM manipulation while overwriting the component's didInsertElement event:

export default Ember.Component.extend({
    setupFunc: function () {    

         $('#tab-navigation-container').unwrap();

    }.on('didInsertElement')
});

where tab-navigation-container is the component's ID.

Answer 2

You should set tagName and classNames to be your outer most element--this will keep consistent styling. For example, say originally you had:

<section class="container col-md-6">
  <div class="col-sm-12 test">
     <p>some content...</p>
     ...
  </div>
</section>

You would create your component like this:

export default Ember.Component.extend({
    tagName: 'section',
    classNames: ['container', 'col-md-6']
});

Then your template can exclude the outer section wrapper

<div class="col-sm-12 test">
   <p>some content...</p>
   ...
</div>

There's really no reason why your CSS should be broken by using components. You can set all the same classes and tags that you were using before and CSS should render just the same.

Let me know if I misunderstood your question.

Answer 3

In Ember 2.7 and below, you can control the top-level tag (even not rendering it), and its CSS classes by modifying your Ember Application as follows:

// app/app.js

App = Ember.Application.extend({
  ApplicationView: Ember.Component.extend({
    classNames: ['my-custom-classname'],
    // Or to omit the tag entirely:
    tagName: '',
  }),
  // ...
});

As seen in this discussion.

This does not require any hacks or a legacy plugin.