# レコード編集画面での全文表示

**URL:** <https://community.cybozu.dev/t/topic/8093>\
**Category:** kintone 開発相談\
**Created:** [2023 年 9 月 12 日午前 2:47 UTC](https://community.cybozu.dev/t/topic/8093 "2023-09-12T02:47:49Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![sakanako](https://avatars.discourse-cdn.com/v4/letter/s/e95f7d/32.png) [@sakanako](https://community.cybozu.dev/u/sakanako)\
**Post date:** [2023 年 9 月 12 日午前 2:47 UTC](https://community.cybozu.dev/t/topic/8093/1 "2023-09-12T02:47:49Z")

</div>

> [@一覧画面での複数行表示](https://community.cybozu.dev/t/topic/2214):
>
> 一覧画面での複数行表示についてです。 複数行フィールドなどで長い文字が入っていても、カーソルを当てないと中身が見れませんが、JSやCSSを利用して3行表示などにすることはできませんでしょうか。

上記のように全文表示をさせたいです。  
こちらをレコード編集画面でうまく動作させられませんでしょうか。

レコード詳細画面では全文見えるのですが、編集画面でも同様に全文が見えるようにしたいです。  
そもそものフィールドを大きくすればいけるのはわかるのですが、そうではなくて行が多いものだけ枠が広がって全文が表示されるようなイメージです。

よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![y\_minamitani9534](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/y_minamitani9534/32/462_2.png) [@y\_minamitani9534](https://community.cybozu.dev/u/y_minamitani9534)\
**Post date:** [2023 年 9 月 13 日午前 1:43 UTC](https://community.cybozu.dev/t/topic/8093/2 "2023-09-13T01:43:05Z")

</div>

@sakanako さん

こんにちは、少しお力になれそうだったので回答させていただきました。  
結論から言いますと、添付のリンクのようにCSSオンリーだと厳しいかと思われます。  
こちら参考をしてみて、応用してみるとしたい事が実現できるかと思われます。

> **[【JavaScript】textareaの入力内容で高さを自動調整する](https://into-the-program.com/javascript-textarea-auto-adjusts-height/)**
>
> 本記事では、JavaScriptでtextareaの入力内容で高さを自動調整する方法をご紹介しています。 上記の疑問にお答えします。 では、解説していきます。 本記事で作成するもの 本記事の内容で完成

ざっくりフローを書いてみると、  
対象のtextarea要素とtextareaの行要素をquerySelectorで取得。(同時に行の高さも変更しなければ要素がずれる為)  
↓  
参考のリンクでの高さを取得してDOM要素に反映。  
行に関しては、元々の高さとtestareaの高さが増加した分の差分を取得。  
↓  
必要であれば、textareaに入力した時のイベント作成して可変的にtextareaの高さを調整する。

こんな感じかと思われます。  
ほんとざっくりなので、もし不明点ございましたらお聞かせください。

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\
**Post date:** [2023 年 9 月 17 日午前 12:56 UTC](https://community.cybozu.dev/t/topic/8093/3 "2023-09-17T00:56:32Z")

</div>

クローズされました: 2023 年 9 月 17 日午前 12:56 UTC

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。
