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.

v-ons-popover not showing



  • Hi, I’m trying to make this code works but it doesn’t. It only shows the popover overlay and not the popover itself. I’m trying to create a toolbar component with a popover under the toolbar button like in the official example

    
    <template>
      <v-ons-toolbar class="app-toolbar">
        <div class="left" v-if="back">
          <v-ons-back-button>{{backLabel}}</v-ons-back-button>
        </div>
        <div class="center">{{title}}</div>
        <div class="right">
          <v-ons-toolbar-button @click="togglePopover($event)">
            <v-ons-icon icon="bars" ></v-ons-icon>
          </v-ons-toolbar-button>
        </div>
        <v-ons-popover cancelable
          :visible.sync="popoverVisible"
          :target="popoverTarget"
          direction="down"
        >
          <p style="text-align: center">Lorem ipsum</p>
        </v-ons-popover>
      </v-ons-toolbar>
    </template>
    
    <script>
    export default {
      props: {
        back: {
          type: Boolean,
          required: false,
          default: false
        },
        backLabel: {
          type: String,
          required: false,
          default: ''
        },
        title: {
          type: String,
          required: true
        }
      },
      data(){
        return{
          popoverVisible: false,
          popoverTarget: null
        }
      },
      methods: {
        togglePopover(event) {
          this.popoverTarget = event;
          this.popoverVisible = !this.popoverVisible;
        }
      }
    }
    </script>
    

    I tried this for 2 hours now and still scratching my head thinking what I did wrong :confused: . Please help


  • Onsen UI

    @Adi-Abdullah Are you using vue@2.3.0 and vue-onsenui@2.0.0-beta.4? In general, a popover should be placed on a v-ons-page, not on a v-ons-toolbar. However, I think that should still work after beta.4.



  • I’m using currently using these:

    • onsenui@2.2.6
    • vue@2.3.0
    • vue-onsenui@2.0.0-beta.4

    @Fran-Diox said:

    However, I think that should still work after beta.4.

    I can’t seem to get it working. Is there anyway for me to do this? I want to put them together because it’s part of the toolbar component. I even tried adding v-ons-page to the component haha

    
      <v-ons-page>
        <v-ons-toolbar class="app-toolbar">
          <div class="left" v-if="back">
            <v-ons-back-button>{{backLabel}}</v-ons-back-button>
          </div>
          <div class="center">{{title}}</div>
          <div class="right">
            <v-ons-toolbar-button @click="togglePopover($event)">
              <v-ons-icon icon="bars" ></v-ons-icon>
            </v-ons-toolbar-button>
          </div>
        </v-ons-toolbar>
        <v-ons-popover cancelable
          :visible.sync="popoverVisible"
          :target="popoverTarget"
          direction="down"
        >
          <p style="text-align: center">Lorem ipsum</p>
        </v-ons-popover>
      </v-ons-page>
    

  • Onsen UI

    @Adi-Abdullah Something like this?



  • Yeah, just like that. I found out that it’s my fault . Here’s my main.js

    import './css/fonts.css';
    // Onsen UI Styling and Icons
    import 'onsenui/css/onsenui.css';
    import 'onsenui/css/onsen-css-components.css';
    //Custom theme
    // import './css/onsenui/onsen-css-components.css';
    

    I was using a custom theme I created using the theme roller, when I commented that out, it was working. Maybe it just ain’t showing just now. lol my bad. Althought its weird that using the custom theme made it non existent :laughing: .

    Edit:
    Tested with a newly created theme, seems like the toolbar is referenced as navigation-bar in theme roller. Maybe this made it so it’s not working?


  • Onsen UI

    @Adi-Abdullah The Theme Roller is only valid for versions up to 2.1.0. After that, the core CSS changed and there is a new local tool for generating themes. When you install Onsen UI (npm install onsenui) you can find this tool in node_modules/onsenui/css-components-src.