Luke nullptr Krupa Luke nullptr Krupa - 1 month ago 8
AngularJS Question

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

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.stack.imgur.com/P6Ln3.png

Thank you, Luke

Answer Source

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*/
  }