実現したいこと
前提
HTML、CSSとも本当に初心者で、仕事の関係で最近勉強を開始しました。
Vutifyを用いてアプリケーションのモックを作成する必要があるのですが、想定した表示になりません。
実現したいところにも記載した通り、左側にナビゲーションメニュー、中央に簡単な入力フォームを作成したいと考えています。
発生している問題・エラーメッセージ
下記ソースコードを表示したところ、左側のナビゲーション部分と中央の入力フォームの間にスペースが生じています。
このスペースを埋めて、左詰めで表示させるにはどのようにしたら良いでしょうか。
該当のソースコード
基本的にVutifyの公式サイトにあるソースを利用しています。
<template> <div class="container"> <div class="navigation ma-0 pa-0"> <v-app> <v-navigation-drawer :width="180"> <v-list-item title="Application" subtitle="Application"></v-list-item> <v-divider></v-divider> <v-list-item link title="Application-A"></v-list-item> <v-list-item link title="Application-B"></v-list-item> <v-list-item link title="Application-C"></v-list-item> </v-navigation-drawer> </v-app> </div> <div class="form ma-0 pa-0"> <v-app> <form @submit.prevent="submit"> <v-text-field v-model="name.value.value" :counter="10" :error-messages="name.errorMessage.value" label="Name" ></v-text-field> <v-text-field v-model="phone.value.value" :counter="7" :error-messages="phone.errorMessage.value" label="Phone Number" ></v-text-field> <v-text-field v-model="email.value.value" :error-messages="email.errorMessage.value" label="E-mail" ></v-text-field> <v-select v-model="select.value.value" :error-messages="select.errorMessage.value" :items="items" label="Select" ></v-select> <v-checkbox v-model="checkbox.value.value" :error-messages="checkbox.errorMessage.value" label="Option" type="checkbox" value="1" ></v-checkbox> <v-btn class="me-4" type="submit" > submit </v-btn> <v-btn @click="handleReset"> clear </v-btn> </form> </v-app> </div> </div> </template> <script setup> import { ref } from 'vue' import { useField, useForm } from 'vee-validate' const { handleSubmit, handleReset } = useForm({ validationSchema: { name (value) { if (value?.length >= 2) return true return 'Name needs to be at least 2 characters.' }, phone (value) { if (value?.length > 9 && /[0-9-]+/.test(value)) return true return 'Phone number needs to be at least 9 digits.' }, email (value) { if (/^[a-z.-]+@[a-z.-]+\.[a-z]+$/i.test(value)) return true return 'Must be a valid e-mail.' }, select (value) { if (value) return true return 'Select an item.' }, checkbox (value) { if (value === '1') return true return 'Must be checked.' }, }, }) const name = useField('name') const phone = useField('phone') const email = useField('email') const select = useField('select') const checkbox = useField('checkbox') const items = ref([ 'Item 1', 'Item 2', 'Item 3', 'Item 4', ]) const submit = handleSubmit(values => { alert(JSON.stringify(values, null, 2)) }) </script> <style> .container{ display: flex; } .navigation{ width: 25%; } .form{ width: 50%; } </style>
試したこと
styleの部分を色々変更したのですが、うまくいかず…。
補足情報（FW/ツールのバージョンなど）
Vueのバージョンは下記の通りです。
@vue/cli 5.0.8
0 コメント