验证：将扩展面板的头部向右对齐

Question

I want to use the Vuetify expansion panel and align part of the content inside the <div slote="head"></div> to the right in order to get this:

https://imgur.com/wraVVsR

https://imgur.com/flrvUw6

but i get this instead:

https://imgur.com/BukqnBC

https://imgur.com/NLgdKWa

I tried

float:right , text-align:right

even negative margins without success.

Answer 1

Important: It seems like your expansion panel is not getting full width

This is what you are looking for:

<div slot="header">
  <v-layout row>
    <v-flex xs8>
      Item
    </v-flex>
    <v-flex xs4 text-xs-right>
      Item
    </v-flex>
  </v-layout>
</div>

Working example: https://codepen.io/anon/pen/vbVxaa

Answer 2

There was this line of CSS somewhere overriding my own CSS.

.v-expansion-panel__header > .v-expansion-panel__header__icon {
  flex: 1 1 auto !important;
}

Deleting it solved the problem.