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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1959閲覧

jQueryで可変の高さに合わせて要素を移動したい

gedachtnis

総合スコア11

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/11/07 13:45

webデザインについてです。

やりたいこと

CSSとjQueryを使用して
・texeareaが改行されると自動的にtextareaの高さが変化する
・↑に合わせてtextareaの下にある要素もtextareaのすぐ下に配置されるようにする
※構造の問題で実際にはtextareaのすぐ下ではなくdlタグのすぐ下になります。

ということを実行したいです。

現在の各コード

HTML

1<dl> 2 <dt><img src="画像URL" class="icon" alt="アイコン画像"/></dt> 3 <dd> 4 <form name="Form" action="" method="post"> 5 <textarea name="message" id="caption">テキストを入力</textarea> 6 </form> 7 </dd> 8</dl> 9<ul> 10 <li>リスト内容</li> 11 <li>リスト内容</li> 12</ul>

CSS

1<style type="text/css"> 2* { 3 box-sizing: border-box; 4 -webkit-box-sizing: border-box; 5} 6 7body { 8 line-height: 1.5; 9 color: #000; 10 background: #FFF; 11 font-family: sans-serif; 12 font-size: 13px; 13} 14 15dl { 16 width: 100%; 17 padding-bottom: 10px; 18} 19 20dl dt { 21 float: left; 22 clear: left; 23 width: 50px; 24} 25 26.icon { 27 width: 50px; 28 height: 50px; 29} 30 31dl dd { 32 margin-left: 50px; 33 width: calc(100% - 50px); 34} 35 36#caption { 37 height: 50px; 38 width: 100%; 39 resize: none; 40 border: thin solid #000; 41 color: #CECECE; 42 background: #FFF; 43 font-family: sans; 44 font-size: 13px; 45} 46</style>

jQuery

1<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 2<script> 3$(function() { 4 var $textarea = $('#caption'); 5 var lineHeight = parseInt($textarea.css('lineHeight')); 6 $textarea.on('input', function(e) { 7 var lines = ($(this).val() + '\n').match(/\n/g).length; 8 $(this).height(lineHeight * lines); 9 }); 10}); 11 12$(function() { 13 var h = $('#caption').outerHeight(); 14 $('ul').css('margin-top',h); 15</script>

現状

上記のコードで動かした結果、textarea内で改行すると高さが自動で変化するというのは成功しましたが、dlタグのすぐ下のulが改行によるtextareaの高さの変化に対応しておらず、改行をし続けてtextareaの高さが伸びるにつれ、ulはtextareaに隠れてしまいます。

何か良い案があればご教授頂ければ幸いです。よろしくお願い致します。

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

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

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

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

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

mix-peach

2019/11/08 02:30

windowsのChromeで、提示コードを動作確認しました。 確認するにあたり、エラー解消のために、 ・jsの閉じカッコ ・#captionのlineHeightを数字で指定 の2点を追記しましたが、何行改行しても、ULがtextareaの下に隠れることはありませんでしたので、 提示されていない部分のHTML、CSS、JSに原因がありそうです。再現するところまでコードの追記をお願いします。 もし、提示コードのみで再現する場合は、確認されているOSとブラウザを追記いただけると良いかと思います。
gedachtnis

2019/11/08 11:08

こんにちは。ご助言有難うございます。 此方で確認したところ、仰る通り提示していないCSSに問題があったようです。 問題のCSSを修正及び#captionにline-heightを指定したことによって無事に動作確認が出来ました。(jsの閉じカッコはこちらにコピーする際に消してしまったようでした) お手数おかけしてしまい申し訳ございませんでした。
guest

回答1

0

自己解決

ご指摘をいただいた通りこちらに提示していないCSSに問題がありました。

CSS

1form { 2 position: relative; 3 height: 50px; 4 vertical-align: middle; 5}

上記のコードを#captionよりも前に記述していました。
こちらは別のフォームに対しての記述だったのでそちらのフォームのidに書き換えたこと
それから

css

1#caption { 2 height: 50px; 3 width: 100%; 4 resize: none; 5 border: thin solid #000; 6 color: #CECECE; 7 background: #FFF; 8 font-family: sans; 9 font-size: 13px; 10 line-height: 26px; 11}

上記のように#captionにline-heightを指定することによって無事に解決しました。

投稿2019/11/08 11:14

gedachtnis

総合スコア11

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問