CODEWITHSUNDEEP
javascriptvue.jsvuetify.jsnuxt.js
user1592380
user1592380

Reputation: 36317

Setting max-width of vuetify expansion panel component

enter image description here

I'm trying to build a webpage with vuetify and nuxt. I'm trying to set the max-width property of the expansion panel ui component (https://vuetifyjs.com/en/components/expansion-panels). I have:

<div id="app"     max-width="800">
  <v-app id="inspire"     max-width="1200"
>
    <v-expansion-panel     max-width="1200">
      <v-expansion-panel-content
        v-for="(item,i) in 5"
        :key="i"
                                     max-width="1200"

      >
        <div slot="header"     max-width="1200"
>Item</div>
        <v-card     max-width="1200">

          <v-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</v-card-text>
        </v-card>
      </v-expansion-panel-content>
    </v-expansion-panel>
  </v-app>
</div>

Heres a codepen link: 

https://codepen.io/anon/pen/YBKXeL?&editable=true&editors=101

Its having no effect , and the expansion panel is at full width. How can I get this working?

Upvotes: 1

Views: 11964

Answers (2)

Sejir Ben Ali
Sejir Ben Ali

Reputation: 210

I generally dislike using the 'style' attribute.

Know that you can apply custom css to vuetify components like so:

.v-expansion-panel {
    max-width: 500px
}

vuetify components are just html elements with some classes applied to them, so you just access their css by class. Another example if you just wanna apply the css to one particular element being nested this way: (v-card inside a v-layout inside a v-container)

.v-container > .v-layout > .v-card {
    // insert css here
}

You can inspect the html elements and see the classes added to the elements by vuetify.

Upvotes: 3

Barzev
Barzev

Reputation: 402

A quick approach would be to apply styles directly to the expansion panel component as usual with in-line CSS, style="maxWidth: 700px;

Here's that example in your codepen: https://codepen.io/anon/pen/exOpGy

Another approach would be to declare your styles on the JS side and reference them with v-bind:style, like so:

https://codepen.io/anon/pen/mvbeXd

Upvotes: 2

Related Questions