Fix filter popovers in modals (#3844)

Since popovers and modals currently share the same z-index (600) a popover that gets created for a filter inside a modal is invisible. It is hidden below the modal. This commit adds a check to see if a filter is created from within a modal window. If yes, the popover will be added to the modal container. Otherwise the default container value `false` is used. Credit to @tobias-kuendig
This commit is contained in:
Tobias Kündig 2018-11-01 15:31:16 +01:00 committed by Luke Towers
parent 4d4ac92d2f
commit bfd726f173
2 changed files with 15 additions and 4 deletions

View File

@ -223,7 +223,15 @@
var self = this,
scopeName = $scope.data('scope-name'),
data = this.scopeValues[scopeName],
isLoaded = true
isLoaded = true,
container = false
// If the filter is running in a modal, popovers should be
// attached to the modal container. This prevents z-index issues.
var modalParent = $scope.parents('.modal-dialog')
if (modalParent.length > 0) {
container = modalParent[0]
}
if (!data) {
data = { loading: true }
@ -246,7 +254,8 @@
modal: false,
highlightModalTarget: true,
closeOnPageClick: true,
placement: 'bottom'
placement: 'bottom',
container: container
})
this.toggleFilterButtons()

View File

@ -3077,14 +3077,16 @@ this.toggleFilterButtons(items)
this.updateScopeSetting(this.$activeScope,items.active.length)
this.isActiveScopeDirty=true
this.focusSearch()}
FilterWidget.prototype.displayPopover=function($scope){var self=this,scopeName=$scope.data('scope-name'),data=this.scopeValues[scopeName],isLoaded=true
FilterWidget.prototype.displayPopover=function($scope){var self=this,scopeName=$scope.data('scope-name'),data=this.scopeValues[scopeName],isLoaded=true,container=false
var modalParent=$scope.parents('.modal-dialog')
if(modalParent.length>0){container=modalParent[0]}
if(!data){data={loading:true}
isLoaded=false}
data=$.extend({},data,{apply_button_text:this.getLang('filter.scopes.apply_button_text','Apply'),clear_button_text:this.getLang('filter.scopes.clear_button_text','Clear')})
data.scopeName=scopeName
data.optionsHandler=self.options.optionsHandler
$scope.data('oc.popover',null)
$scope.ocPopover({content:Mustache.render(self.getPopoverTemplate(),data),modal:false,highlightModalTarget:true,closeOnPageClick:true,placement:'bottom'})
$scope.ocPopover({content:Mustache.render(self.getPopoverTemplate(),data),modal:false,highlightModalTarget:true,closeOnPageClick:true,placement:'bottom',container:container})
this.toggleFilterButtons()
if(!isLoaded){self.loadOptions(scopeName)}}
FilterWidget.prototype.loadOptions=function(scopeName){var $form=this.$el.closest('form'),self=this,data={scopeName:scopeName}