3. Popover comes under Dialog in Onsen 2

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Popover comes under Dialog in Onsen 2

  • C

    Hi Team,

    Encountered anouther issue in Onsen 2. The popover when initiated from a dialog, comes under the dialog. Here is the sample demonstrating the problem - http://codepen.io/CNaik/pen/aNVqBa

    We tried to play with the z-index property but it didn’t help as Onsen seems to be overwriting it. Kindly let me know if we need to use specific properties to make this working fine in Onsen 2.

    The sample also has Onsen 1 CSS and JS references commented. If you comment Onsen 2 resources and uncomment Onsen 1 resources then you will see it working fine.

    Regards,
    CNaik.

    0 1 Reply
  • Onsen UI

    @CNaik Onsen sets z-index in .popover class. You simply need to overwrite that style and make sure your CSS selectors are specific enough.

    This should be enough:

    ons-popover.popover {
  z-index: 20002;
}
    0
  • C

    @Fran-Diox yes, it worked. Thanks a lot.

    I have a question though as you said about specific selector. What if we set this as a global value (same as you have specified) and not applies to specific element. I have set z-index to 50000. As I understand, popover will always be on top and hence it should not create any problem. Do you see any problem?

    Regards,
    CNaik.

    0 1 Reply
  • Onsen UI

    @CNaik ons-popover.popover is more specific than .popover but it still applies to every popover element.

    The only problem you have is that the dialog is z-index: 20001 and it’s not very common to combine it with a popover.

    0
  • C

    @Fran-Diox I am clear.

    Also agree with you that it’s not very common. But it would be very helpful in one of the situation in our application. So tried an caught into the problem :). And happy that it’s resolved.

    Enjoying developing application with Onsen UI especially when we are not core web developers. You guys have done a great job.

    Regards,
    CNaik.

    0
  • C

    @Fran-Diox facing another related problem.

    I have modified above sample ( http://codepen.io/CNaik/pen/aNVqBa ), the only modification is ons-popover size is specified using style=“height: 200px; width: 200px” . If you run the demo, you will see that size is not applying at all. Also, you will see something appears first on left side of screen then it disappear and then popover appears.

    If you set Onsen 1 resources then everything works fine.

    Kindly share if any properties of ons-popover is changed.

    Regards,
    CNaik.

    0 1 Reply
  • C

    @Fran-Diox this is to update you that we have managed to fix it by using this CSS.

    .numInput .popover__content{
    width: 400px;
    }

    Regards,
    CN.

    0
  • Onsen UI

    @CNaik I guess you mean that something appears on the right side of the screen, not the left. That’s the scrollbar. We are not hiding it anymore, but maybe it needs some adjustments for the dialog.

    0
  • C

    @Fran-Diox No I mean some flicker happens on very left side when you specify width and/or height using style property in popover. It happens in Onsen 2 only. It works fine in Onsen 1. Though specifying width as I mentioned in previous post has fixed the problem.

    I know what you said about scrollbar, have noticed it and wanted to get rid of it too :). I understand that you are not hiding it anymore, but let me know if there is any way to hide it while showing dialog as sometime it flickers at extent to get user’s attention.

    Regards,
    CNaik.

    0