javascript - Setting max-width of vuetify expansion panel component - Stack Overflow

admin管理员组

文章数量:1322850

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 ponent (). 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 modo consequat.</v-card-text>
        </v-card>
      </v-expansion-panel-content>
    </v-expansion-panel>
  </v-app>
</div>

Heres a codepen link:

?&editable=true&editors=101

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

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 ponent (https://vuetifyjs./en/ponents/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 modo 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?

• javascript
• vue.js
• vuetify.js
• nuxt.js

Share Improve this question Follow edited Jan 20, 2019 at 23:23 user1592380 asked Jan 20, 2019 at 23:14 user1592380user1592380 36.4k105105 gold badges312312 silver badges551551 bronze badges 4

• Codepen link doesn't work – ljubadr Commented Jan 20, 2019 at 23:20
• How about this? – user1592380 Commented Jan 20, 2019 at 23:24
• That one works. Panel already has max-width: 100%, but when I used <v-expansion-panel style="max-width:500px;"> it respected the width. – ljubadr Commented Jan 20, 2019 at 23:37
• I didn't see that you can pass down the max-width prop for that ponent in the docs – ljubadr Commented Jan 20, 2019 at 23:39

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

I generally dislike using the 'style' attribute.

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

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

vuetify ponents 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.

A quick approach would be to apply styles directly to the expansion panel ponent 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

本文标签： javascriptSetting maxwidth of vuetify expansion panel componentStack Overflow