web-dev-qa-db-ja.com

vuetify data-tableがレンダースクロールバーの代わりにページ全体を拡大するのはなぜですか？

Codepen： https://codepen.io/frutality/pen/LQRGLv （ここに挿入されたコードが何らかの理由でカットされているため、ご覧ください）

<div id="app">
  <v-app>
    <v-navigation-drawer app fixed clipped v-model="drawer"></v-navigation-drawer>

    <v-toolbar app dense absolute clipped-left dark color="primary">
      <v-toolbar-title>
        <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
        <span class="hidden-xs-only">Logo</span>
      </v-toolbar-title>
    </v-toolbar>

    <v-content>
      <v-container fluid fill-height>
        <v-layout>
          <div>
            <v-data-table :headers="headers" :items="titles" hide-actions disable-initial-sort class="elevation-1">
              <template slot="items" slot-scope="props">
              <td>
                {{ props.item.title }}
              </td>
              <td>{{ props.item.type }}</td>
              <td>{{ props.item.imdb_id }}</td>
              <td>{{ props.item.is_adult }}</td>
              <td>{{ props.item.start_year }}</td>
              <td>{{ props.item.end_year }}</td>
              <td>{{ props.item.duration }}</td>
              <td>{{ props.item.genres_temp }}</td>
            </template>
            </v-data-table>
            <div class="text-xs-right">
              <v-btn color="primary" class=mr-0>Refresh</v-btn>
            </div>
          </div>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</div>

データテーブルに多数の列があり、ブラウザの幅が大きくない場合（約1300pxまたは最大〜600pxを試してください）、すべてのコンテンツを表示できません。

しかし、 https://vuetifyjs.com/components/data-tables にアクセスすると、各例の下にその素敵な水平スクロールバーが表示されます。

コードペンに表示されないのはなぜですか？

htmlcssvue.jsflexboxvuetify.js
6
frutality

Vuetify CSSに小さなバグがあるようですが、そのlayoutクラスは、フレックスであるため、テーブルの応答性でNiceを再生しません。

以下を追加することは、それを修正する1つの方法です。

.layout {
  display: inline-block;
  width: 100%;
}

または、layoutルールを上書きせずに、テーブルを含むdivを追加することもできます。

3
Tyler