CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
bgc
bgc

Reputation: 57

Speed-Dial Icons not centered

I am trying to build a Speed Dial for a web app, but no matter what I try, the Icons in the Speed Dial are off-center.

I followed the tutorial on https://vuetifyjs.com/en/components/floating-action-buttons, but even if I copy&paste the code from there, The Icons are not centered

<v-speed-dial
        fab
        bottom
        right
        fixed
        v-model="fab"
        direction="top"
        transition="slide-y-reverse-transition"
      >
        <v-btn
          icon
          slot="activator"
          fab
          dark
          color="blue lighten-2"
          v-model="fab"
        >
          <v-icon>account_circle</v-icon>

          <v-icon>close</v-icon>
        </v-btn>

        <v-btn fab dark small color="green">
          <v-icon>edit</v-icon>
        </v-btn>

        <v-btn fab dark small color="indigo">
          <v-icon>add</v-icon>
        </v-btn>
      </v-speed-dial>

Actual Behavior:

Actual Behavior (1) Actual Behavior (2)

Expected Behavior:

Expected Behavior (1) Expected Behavior (2)

Does anyone know what I am doing wrong there?

Upvotes: 0

Views: 1016

Answers (1)

ExcessJudgment
ExcessJudgment

Reputation: 228

You may want to check your v-icon align properties in the console. This css seems to affect the position of the interior icon.

.v-icon {
    align-items: center;
    display: inline-flex;
    -webkit-font-feature-settings: "liga";
    font-feature-settings: "liga";
    font-size: 24px;
    justify-content: center;
    line-height: 1;
    transition: .3s cubic-bezier(.25,.8,.5,1);
    vertical-align: text-bottom;
    box-shadow: 0 0 black;
}

Upvotes: 1

Related Questions