質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Q&A

解決済

1回答

3372閲覧

vuetifyのdialogを中央表示させたい

tktail

総合スコア72

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

0グッド

0クリップ

投稿2020/07/01 03:29

Vuetifyを使用。
投稿ボタンをクリックするとモーダルウィンドウでフォーム画面が表示されるプログラムを作っています。
ロゴやAuthのメニュー画面をFixedにしている関係なのか、モーダルウィンドウの縦の中央表示がされません。(ちょっと上によっている感じ)

component

1<template> 2 <v-row justify="center"> 3 <v-dialog 4 v-model="dialog" 5 max-width="600px" 6 > 7 8 <template v-slot:activator="{ on, attrs }"> 9 <v-btn 10 color="blue darken-1" 11 dark 12 depressed 13 small 14 v-bind="attrs" 15 v-on="on" 16 > 17 <v-icon class="body-2">mdi-fountain-pen-tip</v-icon> 18 <span class="px-2"><slot />投稿</span> 19 </v-btn> 20 </template> 21 22 <v-card> 23 24 <v-card-text> 25 <v-container> 26 27 <!--this_id--> 28 <!--user_id--> 29 30 <v-text-field label="名前*" required></v-text-field> 31 <v-select 32 v-model="select" 33 :items="attributes" 34 :rules="[v => !!v || 'Item is required']" 35 label="タグ*" 36 name="attributes" 37 required 38 ></v-select> 39 40 <v-text-field 41 label="タイトル*" 42 hint="内容のタイトルを設定しましょう。" 43 required 44 ></v-text-field> 45 46 <v-textarea 47 label="内容*" 48 hint="この場所の雑学や知識を共有しましょう。" 49 name="knowledge" 50 required 51 ></v-textarea> 52 53 </v-container> 54 </v-card-text> 55 56 <v-card-actions> 57 <v-spacer></v-spacer> 58 <v-btn color="blue darken-1" text @click="dialog = false">投稿</v-btn> 59 </v-card-actions> 60 61 </v-card> 62 </v-dialog> 63 </v-row> 64</template> 65 66<script> 67 68 export default{ 69 data: () => ({ 70 select: null, 71 attributes: [ 72 '1', 73 '2', 74 '3', 75 '4', 76 ], 77 dialog: false, 78 }) 79 } 80 81</script>

vuetifyの知見のある方、ご回答お待ちしております。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

どうやらiphone 5/SE 6.7.8のみ発生する模様でそちらの問題解決に向けてコードを組みなおすことにします。

投稿2020/07/01 07:32

tktail

総合スコア72

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問