У меня есть график plotly.js, который генерируется внутри <v-card>
, который находится внутри <v-tab-item>
.Когда график сгенерирован, он не охватывает всю ширину <v-card>
.
<div id="app">
<v-app>
<v-tabs>
<v-tab>Item 1</v-tab>
<v-tab-item>
<v-card class="ma-3">
<v-card-title>
<h1 class="headline">Plotly Testing 1</h1>
</v-card-title>
<v-card-text>
<div id="chart-elevation"></div>
</v-card-text>
</v-card>
</v-tab-item>
<v-tab>Item 2</v-tab>
<v-tab-item>
</v-tab-item>
</v-tabs>
</v-app>
</div>
. Он дает такой результат:
Тем не менее, размещение <v-card>
вне <v-tab-item>
позволяет успешно генерировать график, охватывающий ширину:
<div id="app">
<v-app>
<v-card class="ma-3">
<v-card-title>
<h1 class="headline">Plotly Testing 1</h1>
</v-card-title>
<v-card-text>
<div id="chart-elevation"></div>
</v-card-text>
</v-card>
</v-app>
</div>
Производство:
Я пробовал несколько исправлений, таких как <div id="chart-elevation">
внутри тега <v-layout child-flex>
, но это приводит к тому, что график имеет ширину всего 2 пикселя.Предоставление div встроенного стиля width: 100%
дает тот же результат, а также то же самое, что и стиль в классах.Я пытался использовать layout.margin.t|r|b|l
, но тоже не помогло.