textareaについて、placeholder="メッセージを入力"と入力窓に表示させたいのですが、左上に表示をされて見切れています・・・

【Vue.js + Firebase】 vue.jsとcssについての質問です

プログラミング勉強をし始めて約４ヶ月とまだまだ浅く、日々勉強中の社会人です。

上記、記事を参考にさせて頂き、初めてのチャット機能を実装したいのですが、下記実装したく投稿させて頂きました。

textareaについて、placeholder="メッセージを入力"と入力窓に表示させたいのです。
しかし、左上に表示をされて見切れています・・・

イメージとしては、LINEのようにtextareaの入力窓の字数毎に行が追加されていくようにし、
placeholder="メッセージを入力"も入力窓の左寄せ、且つ、上下中央に指定したいです。

勉強し始めたばかりなので至らぬ点が多いかとお思いますが、どこをどう直したら良いかご教授いただけると幸いです。
宜しくお願い致します。

ソースコード

HTML
1<template>
2  <div class="chat flex">
3    <h1 class="chat-tll flex">Chat Room</h1>
4
5    <!--Firebase から取得したリストを描画-->
6    <transition-group name="chat" tag="div" class="list content">
7      <section
8        v-for="{ key, name, image, message } in chat"
9        :key="key"
10        class="item"
11      >
12        <!--「画像」の指定-->
13        <div class="item-image">
14          <img :src="image" width="40" height="40" />
15        </div>
16        <!--「名前」と「メッセージ」の指定-->
17        <div class="item-detail">
18          <div class="item-name">{{ name }}</div>
19          <div class="item-message">
20            <nl2br tag="div" :text="message" />
21          </div>
22        </div>
23      </section>
24    </transition-group>
25
26    <!-- 入力フォームの設定 -->
27    <form action="" @submit.prevent="doSend" class="form flex">
28      <textarea
29        v-model="input"
30        placeholder="メッセージを入力"
31        :disabled="!user.uid"
32        @keydown.enter.exact.prevent="doSend"
33      ></textarea>
34      <button type="submit" :disabled="!user.uid" class="send-button">
35        <img src="../assets/矢印icon.jpg" class="send-img" alt="送信" />
36      </button>
37    </form>
38  </div>
39</template>
40

js
1<script>
2import firebase from "firebase";
3import Nl2br from "vue-nl2br";
4// 改行を <br> タグに変換するモジュール
5
6export default {
7  components: { Nl2br },
8  data() {
9    return {
10      user: {}, // ユーザー情報
11      chat: [], // 取得したメッセージを入れる配列
12      input: "", // 入力したメッセージ
13    };
14  },
15  created() {
16    firebase.auth().onAuthStateChanged((user) => {
17      this.user = user ? user : {};
18      const ref_message = firebase.database().ref("message");
19      if (user) {
20        this.chat = [];
21        // message に変更があったときのハンドラを登録
22        ref_message.limitToLast(10).on("child_added", this.childAdded);
23      } else {
24        // message に変更があったときのハンドラを解除
25        ref_message.limitToLast(10).off("child_added", this.childAdded);
26      }
27    });
28  },
29  methods: {
30    // スクロール位置を一番下に移動
31    scrollBottom() {
32      this.$nextTick(() => {
33        //絶対値からbody要素の高さを取得
34        window.scrollTo(0, document.body.clientHeight);
35      });
36    },
37    childAdded(snap) {
38      //childAdded：データベースからアイテムのリストを取得する関数
39      // 受け取ったメッセージをchatに追加
40      const message = snap.val();
41      // データベースに新しい要素が追加されると随時呼び出される
42      this.chat.push({
43        key: snap.key,
44        name: message.name,
45        image: message.image,
46        message: message.message,
47      });
48      this.scrollBottom();
49    },
50    doSend() {
51      if (this.user.uid && this.input.length) {
52        // firebase にメッセージを追加
53        firebase
54          .database()
55          .ref("message")
56          .push(
57            {
58              message: this.input,
59              name: this.user.displayName,
60              image: this.user.photoURL,
61            },
62            () => {
63              this.input = ""; // フォームを空にする
64            }
65          );
66      }
67    },
68  },
69};
70</script>

css
1<style lang="scss">
2@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,500&display=swap");
3
4.chat {
5  width: 100%;
6  flex-direction: column;
7  &-tll {
8    width: 100%;
9    color: #fff;
10    font-family: "Roboto", sans-serif;
11    background-color: #000000;
12    padding: 1rem 3rem;
13    position: sticky;
14    top: 0;
15    z-index: 999;
16  }
17  .content {
18    margin: 0 auto;
19    padding: 0 10px;
20    max-width: 600px;
21    .item {
22      position: relative;
23      display: flex;
24      align-items: flex-end;
25      margin: 0.8em;
26    }
27    .item-image {
28      img {
29        border-radius: 20px;
30        vertical-align: top;
31      }
32    }
33    .item-detail {
34      margin: 0 0 0 1.4em;
35      .item-name {
36        font-size: 75%;
37      }
38      .item-message {
39        display: inline-block;
40        position: relative;
41        margin: 0 0 0 50px;
42        padding: 10px;
43        max-width: 460px;
44        border-radius: 12px;
45        background: #00ec0ccb;
46        z-index: 5;
47      }
48      .item-message::before {
49        position: absolute;
50        content: " ";
51        display: block;
52        left: -16px;
53        bottom: 12px;
54        border: 4px solid transparent;
55        border-right: 12px solid #00ec0ccb;
56      }
57    }
58  }
59  .list {
60    width: 100%;
61    margin-bottom: 100px;
62  }
63  .form {
64    width: 98%;
65    position: fixed;
66    bottom: 0;
67    height: 3rem;
68    textarea {
69      width: 100%;
70      height: 3em;
71      border: 1px solid #ccc;
72      border-radius: 25px;
73      resize: none;
74      margin-right: 0.5rem;
75    }
76    .send-button {
77      width: 2rem;
78      height: 2rem;
79      cursor: pointer;
80      border: none;
81      outline: none;
82      .send-img {
83        width: 100%;
84        height: 100%;
85      }
86    }
87  }
88}
89
90/* トランジション用スタイル */
91.chat-enter-active {
92  transition: all 1s;
93}
94.chat-enter {
95  opacity: 0;
96  transform: translateX(-1rem);
97}
98</style>
99

K_3578

2021/03/31 05:11

>左上に表示されてどういう事？そもそも検索窓に入らずに画面上の左上に表示されてるのか検索窓の左上に表示されるのが意図しない仕様なのかこの文章だとわかりません。

yambejp

2021/03/31 05:14

当該のtextareaをキャプチャして例示できないですか？ placeholderなので左上から始まるのは普通だと思いますが・・・

TMTN

2021/03/31 05:16

画像を貼り付けたつもりが貼り付けれてなかったです。大変申し訳ございません。画像追加いたしました。

K_3578

2021/03/31 05:22

検索窓の形状的に見切れてるように見えるが、::placeholderとか使えば動かせなかったっけ。

TMTN

2021/03/31 05:34

::placeholderを使えば、メッセージを入力の位置は変えれましたが入力位置はかえれないのでしょうか。。そもそも文字数制限をしたら一行とかになって綺麗に収まるのかなと思い rows要素とcols要素を追加してみましたが、特に変化ありませんでした。。

int32_t

2021/03/31 06:09

1行の入力欄が欲しいのですか?

K_3578

2021/03/31 06:35

気付いてなかったですけど1行の入力欄で良いなら<textarea>使う意味ないですね。

TMTN

2021/03/31 08:18

実際は一行でなく複数行欲しいです。ややこしいこと言ってしまいすいません。

K_3578

2021/03/31 08:42

私の回答に追記しておいた記事が参考になるかもしれんのでご一読してみては

行動規範の内容に同意します

回答1件

ベストアンサー

動作環境無いので保証はしないけどシンプルにpadding指定したら良いんじゃないかと。

css
1 textarea {
2      width: 100%;
3      height: 3em;
4      border: 1px solid #ccc;
5      border-radius: 25px;
6      resize: none;
7      margin-right: 0.5rem;
8      padding: 10rem; /*適当に値入れてます*/
9    }