lorisleiva / solana-wallets-vue

Solana wallet integration for Vue 3
https://solana-wallets-vue-demo.netlify.app/
173 stars 65 forks source link

Unable to get the copy/disconnect dropdown to show #22

Open lmvdz opened 2 years ago

lmvdz commented 2 years ago

I am able to get my wallet connected, but when I click the button with my public key showing it doesn't show the copy/disconnect dropdown.

I am using Vite + VueJS 3 + Vuetify

No errors in console

lmvdz commented 2 years ago

Figured out the issue... was actually opening up, but it was rendering in a Vuetify <v-app-bar> which has some overflow: none I think.

lmvdz commented 2 years ago

image

But it should be showing, but I can't see it

lmvdz commented 2 years ago

I ended up doing hacky css to fix this...

<template>
  <v-app>
    <!-- <v-navigation-drawer app> -->
      <!-- -->
    <!-- </v-navigation-drawer> -->

    <wallet-multi-button dark/>

    <v-app-bar app>
      <!-- -->
      <Logo :height="64" heightUnits="px" :width="64" widthUnits="px"/>
      <GithubLink :height="32" heightUnits="px" :width="32" widthUnits="px"/>
      <v-spacer/>
    </v-app-bar>

    <!-- Sizes your content based upon application components -->
    <v-main>

      <!-- Provides the application the proper gutter -->
      <v-container fluid>
        <!-- If using vue-router -->
        <router-view/>
      </v-container>
    </v-main>

    <v-footer app>
      <v-row>

      </v-row>
    </v-footer>
  </v-app>

</template>
<style>

.swv-dropdown {
  position: absolute !important; right: 0px; top: 0px; z-index: 1008;
}

.swv-dropdown-list {
  top: 3.25em !important;
  right: 1em !important;
}

.swv-button-trigger {
  position: absolute !important; right: 0px; top: 0px; z-index: 1008; margin: .5em;
}

</style>
lmvdz commented 2 years ago

works, but still have that same issue as #7