Components > Cannot use layout with a component


I am trying to use a layout with my component, as to wrap it with another element, but I cant get it to work.

I have an abstract-question-base component, from which all question-type components extend. I want all of the question types to have two element wrappers, an outer-wrapper, and content-wrapper. The intention is to vertically center all of the content inside the question-type components in most outer element. I would like to avoid creating another component that I nest my question-type components in solely for the purpose of wrapping my question-type components with another element.

The following pattern works when used inside a view, but not when I use it inside of my abstract-question-base component.

define(["ember", "jquery"], function(Ember, $) {
  return Ember.Component.extend({
    classNameBindings: ['mainClass','displayState'],
    mainClass: 'question-wrapper',
    displayState: null,
    layoutName: 'test-layout',

Is there something else I should be doing here? Or is this simply just not possible?