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?
Share Improve this question edited Jan 20, 2019 at 23:23 user1592380 asked Jan 20, 2019 at 23:14 user1592380user1592380 36.4k105 gold badges312 silver badges551 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
2 Answers
Reset to default 3I 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