ngMaterial - md-autocomplete - results list showing behind modal form

Question

I've got modal form, where I would like to have field with autocompletition in my modal form.

To achieve that, I'm using md-autocomplete from angular-material#1.1.0, which provides such functionality and is easy to use.

The problem is when I write something inside this field, entire suggestions list appears behind my modal window, but it should appear on top of this modal form.

Do you have any idea how to solve this issue?

I'm attaching html code of form's source and related angular's controller.

movie-resource-dialog-controller.js

(function() {
'use strict';

angular
    .module('vodApp')
    .controller('MovieResourceDialogController', MovieResourceDialogController);

MovieResourceDialogController.$inject = ['$http', '$timeout', '$scope', '$stateParams', '$uibModalInstance', 'DataUtils', 'entity', 'MovieResource', 'Movie'];

function MovieResourceDialogController ($http, $timeout, $scope, $stateParams, $uibModalInstance, DataUtils, entity, MovieResource, Movie) {
    var vm = this;

    vm.movieResource = entity;
    vm.clear = clear;
    vm.byteSize = DataUtils.byteSize;
    vm.openFile = DataUtils.openFile;
    vm.save = save;

    $timeout(function (){
        angular.element('.form-group:eq(1)>input').focus();
    });

    function clear () {
        $uibModalInstance.dismiss('cancel');
    }

    function save () {
        vm.isSaving = true;

        if (vm.movieResource.id !== null) {
            MovieResource.update(vm.movieResource, onSaveSuccess, onSaveError);
        } else {
            MovieResource.save(vm.movieResource, onSaveSuccess, onSaveError);
        }
    }

    function onSaveSuccess (result) {
        $scope.$emit('vodApp:movieResourceUpdate', result);
        $uibModalInstance.close(result);
        vm.isSaving = false;
    }

    function onSaveError () {
        vm.isSaving = false;
    }

    vm.setResource = function ($file, movieResource) {
        if ($file && $file.$error === 'pattern') {
            return;
        }
        if ($file) {
            DataUtils.toBase64($file, function(base64Data) {
                $scope.$apply(function() {
                    movieResource.resource = base64Data;
                    movieResource.resourceContentType = $file.type;
                });
            });
        }
    };

    vm.querySearchMoviesLike = function (query) {
        Movie.queryByTitle({
            title: query
        }, onSuccess, onError);
        function onSuccess(data, headers) {
            vm.proposedMovies = data;
        }
        function onError(error) {
            AlertService.error(error.data.message);
        }

        return vm.proposedMovies;
    }
}
})();

movie-resource-dialog.html

 <div class="form-group">
        <label class="control-label">Movie Title</label>
        <md-autocomplete flex
                         md-selected-item="vm.selectedMovie"
                         md-search-text="vm.searchMovieTitle"
                         md-items="item in vm.querySearchMoviesLike(vm.searchMovieTitle)"
                         md-item-text="title"
                         md-delay="300">
            <div layout="row" class="item" layout-align="start center">
                <img data-ng-src="{{'data:' + item.posterContentType + ';base64,' + item.poster}}" style="width: 40px;" />
                &nbsp;&nbsp;
                <span md-highlight-text="vm.searchMovieTitle">{{item.title}}</span>
            </div>
        </md-autocomplete>
    </div>

Screenshot (it looks like that): https://i.sstatic.net/P6Ln3.png

Thank you, Luke

Notice

Is that a bootstrap modal ? – Rubie

#16134154 – Alchemist

Answer 1

You need a override for modal z-index css property. Add this css style to your existing stylesheet or on page md-autocomplete-suggestions-container

.md-autocomplete-suggestions-container{  
   z-index:100000 !important; /* any number of choice > 1050*/
  }

Rubie

Answer 2

I had almost the same problem, but in my case my list was not selectable, my problem was because when the modal is open it has a general "pointer-events: none" so i add the css below on my global css and it solved my problem. Hope it can help someone else.

.md-autocomplete-suggestions-container{  
   pointer-events: all !important;
 }

Aldred

Answer 3

For anybody still looking for this, I found this work around that worked for me

/deep/ .cdk-overlay-container { z-index: 9999; }

Struck