Popover Options does not apply

#1

Goodmorning everyone,

I have a Popover called within a function, with some property like showBackdrop and enableBackdropDismiss on it, but the options do not work as expected.

orderByUser() {
	let popover = this.popoverCtrl.create(	
		popoverUserList, // definition
		{order_by: this.order_by}, // some params
		{showBackdrop: false, enableBackdropDismiss: true}); // opt
	
	popover.onDidDismiss(value => {
		if (value) {
			this.reorderList(value);
		}
	});
	
	popover.present();
}

The popover displays properly, but without the options I set before (i.e. no darkened background).
Something wrong in my code?

Here the doc: Popover v2 ionic

#2

I guess that you should set showBackdrop to true if you want the darkened background. By setting it to false you’re actually hiding the backdrop (i.e. the darkened background). Here is the description from the docs for PopoverOptions:

showBackdrop | boolean | Whether to show the backdrop. Default true.

#3

Hi @iignatov,
thx for your answer.

I tried all combinations , but does not work.

{showBackdrop: true, enableBackdropDismiss: true}

With showBackdrop: true, enableBackdropDismiss works as intended.

With showBackdrop: false, enableBackdropDismiss does not work and it is always enable, you can’t dismiss by tapping the backdrop.

Anyhow, showBackdrop does not work and i can’t have the darkened background.

Whatever I do (also without any settings) backdrop is clear.

Any suggestions?

  • edit
    using Modal instead of Popover give again strange behaviour:
    enableBackdropDismiss work well.
    showBackdrop has some problem… whether is it set to true or false, the background is dark.
#4

As far as I know, with showBackdrop:false you cannot dismiss the Popover, since it’s the backdrop element that has to register your tap and dismiss the popover. If you don’t want the backdrop to be visible (darkened background) but still want to dismiss the popover with a tap aside, you could use plain CSS (‘opacity: 0’) to style the backdrop element.

1 Like
#5

Well, that sounds good… But in the doc maybe has to be clarified.

#6

I would suggest you to inspect the element in dev tools. If you check the Popover example in the docs, you’ll notice that the backdrop is actually almost invisible (opacity: 0.08 on iOS, 0.01 on Android), so maybe it seems invisible because of the dark backround (in your screenshot). However, if you believe that there’s a real problem, then I would suggest you to open an issue about it so that it could be verified and fixed.

1 Like
#7

@iignatov page opacity is set to 0.01, but popover has no opacity by default:

Instead, modal has 0.4 opacity by default:

Adding some opacity with css to the popover backdrop elements works (the marked line in the first screenshot), but so I did not understand the utility of the option showBackdrop :stuck_out_tongue:

Thank you a lot anyway!

#8

For darkened background on Popover, use {cssClass: 'backdropOpacityPopover'} during the create function and then add css:

.backdropOpacityPopover {
    ion-backdrop {
        opacity: 0.4;
    }
}
#9

I couldn’t understand where to use this class. Could you tell me where to put it in the create method ??

#10

I have put this in app.scss:

ion-backdrop {
	opacity: 0.4;
}

In each point of my project, popover now had darkened background.

#11

Have you seen a slight delay in the way the backdrop disappears. i.e. the backdrop remains for a small duration before it returns to the normal page which invoked the popover.

#12

I would say no, maybe is just your phone!

#13

This did not work for me.