2

I cannot get the ons-popover to work on my Phonegap App. When I click on the button to show a popover the entire page dims but no content shows on the page. Below is the simple page I am using.

<ons-page id="testPopCtrlerid" ng-controller="TestPopController"  style="background-color: white; color: black" >
    <section>
        <br><br><br><br><br>
        <div style="text-align: center">
            <div style="margin-top: 30px; text-align: center">
                <ons-button id="my-btn" modifier="light" ng-click="showPopOver('#my-btn')">Show popover</ons-button>
            </div>
        </div>
    </section>

    <ons-template id="popovert.html">
        <ons-popover modifier="android" direction="up down" cancelable>
            <div style="text-align: center; opacity: 0.5; color: black; background-color: red; font-size: 10pt; z-index: 1000000">
                <p style="text-align: center; opacity: 0.5; color: black; background-color: red; font-size: 10pt; z-index: 1000000">This is a popover!</p>
                <p style="text-align: center; color: black; background-color: red; font-size: 10pt; z-index: 1000000">Click the background to remove the popover.</p>
            </div>
        </ons-popover>
    </ons-template>

</ons-page>


        app.controller('TestPopController', function ($scope) {
            ons.createPopover('popovert.html').then(function(popover) {
                $scope.popover = popover;
            });

            $scope.showPopOver = function(e) {
                $scope.popover.show(e);
            };
        });
Mark A. Rupert
  • 527
  • 7
  • 15

1 Answers1

3

There doesn't seem to be any specific problem in the code which you are giving.

The way which you are explaining the problem it sounds like a css issue. Make sure that you are not hiding the popover with some of your styles.

Here is a working demo of the code which you have given.

The demo has been made with Onsen 2.beta.7. You could update your version just in case. Also if you did some update recently don't forget to update not only the js files, but the styles too.

If it is an issue of the styles then you could right click => ispect element, find the popover and see why it's invisible.

Also since you tagged it with android does that mean that the problem occurs only when you're testing on android?

Ilia Yatchev
  • 1,254
  • 7
  • 9
  • I am using onsen version 1.3.2. Seems like that is the most recent version. I am testing with the Ripple Emulator and my Android device. Could not find anything specific by inspecting in the Ripple Emulator. – Mark A. Rupert Mar 22 '16 at 14:19
  • 1
    So I have determined that the problem is related to my bootstrap.min.css. It seems to be overriding the popover class. If I remove the bootstrap.min.css the popover shows up but it is all black with no content and i it messes up my layout. It looks like it is version v3.0.3 – Mark A. Rupert Mar 22 '16 at 16:00