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.


Log in to reply