Position a mdPanel inside a mdDialog

I'm trying to position a mdPanel under a TextBox within a dialog but the mdPanel always appears in the upper left corner of the mdDialog ? What am I doing wrong?

The HTML of the component:

<div class="hide">
    <div id="dialogSpotlight" class="md-dialog-container">
        <md-dialog>
            <md-toolbar class="md-accent">
                <div class="md-toolbar-tools">
                    <h4>@ResourceManager.GetLiteral("SpotlightComponentSearch")</h4>
                    <span flex></span>
                    <md-button class="md-icon-button">
                        <md-icon class="material-icons" ng-click="$ctrl.closeDialog()">close</md-icon>
                    </md-button>
                </div>
            </md-toolbar>
            <div layout="row" layout-align="center center" layout-padding>
                <md-input-container id="spotlight-component-dialog-input-search-container" flex="80">
                    <label>&nbsp;</label>
                    <input placeholder="Buscar" ng-model="$ctrl.searchedText" ng-keypress="$ctrl.keyPress($event)" ng-keyup="$ctrl.keyUp($event)" />
                </md-input-container>
                <md-button class="md-icon-button" flex="20">
                    <md-icon class="material-icons">search</md-icon>
                </md-button>
            </div>
            <div>
<!--Aquí va el elemento al que intento vincular el mdPanel -->
                <md-content class="spotlight-component-dialog-panel-container">
                    <div id="spotlight-component-dialog-panel-content"></div>
                </md-content>
            </div>
        </md-dialog>
    </div>
</div>

The configuration of mdPanel :

function openPanel(position) {
    var config = {
        attachTo: angular.element(document.body),
        templateUrl: 'templates/shared/spotlightPanel',
        controller: PanelController,
        controllerAs: '$panelCtrl',
        position: position,
        clickOutsideToClose: true,
        escapeToClose: true,
        focusOnOpen: false,
        zIndex: 89,
        locals: {
            data: {
                properties: $ctrl.properties,
                demands: $ctrl.demands,
                people: $ctrl.people,
                propertiesOwners: $ctrl.propertiesOwners,
                demandsOwners: $ctrl.demandsOwners,
                peopleCategories: $ctrl.peopleCategories,
                searchedText: $ctrl.searchedText
            },
            showProperties: $ctrl.showProperties,
            showDemands: $ctrl.showDemands,
            showPeople: $ctrl.showPeople,
            showWheel: $ctrl.showWheel,
            callbacks: {
                propertyCallback: $ctrl.propertyCallback,
                propertyOwnerCallback: $ctrl.propertyOwnerCallback,
                demandCallback: $ctrl.demandCallback,
                demandOwnerCallback: $ctrl.demandOwnerCallback,
                peopleCallback: $ctrl.peopleCallback,
                peopleCategoryCallback: $ctrl.peopleCategoryCallback
            }
        }
    }
    if ($spotlightComponentPanelRef != null) {
        $spotlightComponentPanelRef.close();
    }

    $ctrl._mdPanel.open(config)
        .then(function (result) {
            $spotlightComponentPanelRef = result;
        });
}

The function that actually opens the mdPanel :

function checkAllSearched($ctrl) {
    var allLoaded = true;
    var relativeElementID = "spotlight-component-dialog-panel-content";

    for (var i = 0; i < $ctrl.allSearched.length; i++) {
        if ($ctrl.allSearched[i] == false) {
            allLoaded = false;
        }
    }

    if (allLoaded) {
        var position = $ctrl._mdPanel.newPanelPosition()
        .relativeTo("#" + relativeElementID)
        .addPanelPosition($ctrl._mdPanel.xPosition.ALIGN_START, $ctrl._mdPanel.yPosition.BELOW);

        $ctrl.openPanel(position);
    }
}