ngMaterial — md-autocomplete — список результатов, отображаемый за модальной формой

У меня есть модальная форма, где я хотел бы иметь поле с автозаполнением в моей модальной форме.

Для этого я использую md-autocomplete из angular-material#1.1.0, который предоставляет такую ​​функциональность и прост в использовании.

Проблема в том, что когда я пишу что-то в этом поле, за моим модальным окном появляется весь список предложений, но он должен отображаться поверх этой модальной формы.

У вас есть идеи, как решить эту проблему?

Я прилагаю html-код источника формы и соответствующего контроллера angular.

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>

Скриншот (выглядит так): https://i.stack.imgur.com/P6Ln3.png

Спасибо, Люк


person Luke nullptr Krupa    schedule 08.12.2016    source источник
comment
Это модальный бутстрап?   -  person Searching    schedule 09.12.2016


Ответы (3)


Вам нужно переопределить модальное свойство z-index css. Добавьте этот стиль CSS в существующую таблицу стилей или на страницу md-autocomplete-suggestions-container.

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

У меня была почти такая же проблема, но в моем случае мой список нельзя было выбрать, моя проблема заключалась в том, что когда модальный режим открыт, он имеет общий «указатель-события: нет», поэтому я добавляю css ниже в мой глобальный css, и он решил моя проблема. Надеюсь, это может помочь кому-то еще.

.md-autocomplete-suggestions-container{  
   pointer-events: all !important;
 }
person Slaters    schedule 17.08.2017

Для тех, кто все еще ищет это, я нашел эту работу, которая сработала для меня.

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

person Community    schedule 16.05.2019