I have a 3 column layout in my app. I'm using Semantic UI. So, the layout is:
<div class='ui celled grid'>
<div class='left column'>...</div>
<div class='middle column'>...</div>
<div class='right column'>...</div>
</div>
So, straightforward.
In my application.hbs it is simply:
<div class='ui celled grid'>
<div class='left column'><!-- menu --></div>
{{outlet}}
</div>
And the other 2 columns are in my sub-controller/templates. And this works fine until I need a View. If I need a View, then Ember makes the HTML layout become:
<div class='ui celled grid'>
<div class='left column'><!-- menu --></div>
<div class='ember-view'>
<div class='middle column'><!-- content --></div>
<div class='right column'><!-- content --></div>
</div>
</div>
And the wrapping <div class='ember-view'> breaks my layout. Because I don't always need a View I need a way to make the HTML the same for with or without a View.
At this point, I see 2 solutions. I'll either have to rework my layout in some way (that I'm yet to work out). Or I can get rid of the wrapping div.
But is it possible to get rid of the wrapping div? I tried this:
export default Ember.View.extend({
tagName: null
});
But that doesn't work. I also tried a span, but that still breaks my layout.
Any ideas?
Thanks.
Try using
tagName:''
The empty string as the tagName's value on your view.
Update: When I brought this to the attention of ember.js contributors, they suggested inheriting the view from
Ember._MetamorphView