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

Question

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

やりたいこと

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

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

現在の各コード

<dl>
  <dt><img src="画像URL" class="icon" alt="アイコン画像"/></dt>
  <dd>
    <form name="Form" action="" method="post">
      <textarea name="message" id="caption">テキストを入力</textarea>
    </form>
  </dd>
</dl>
<ul>
  <li>リスト内容</li>
  <li>リスト内容</li>
</ul>

<style type="text/css">
* {
 box-sizing: border-box;
 -webkit-box-sizing: border-box;
}

body {
 line-height: 1.5;
 color: #000;
 background: #FFF;
 font-family: sans-serif;
 font-size: 13px;
}

dl {
 width: 100%;
 padding-bottom: 10px;
}

dl dt {
 float: left;
 clear: left;
 width: 50px;
}

.icon {
 width: 50px;
 height: 50px;
}

dl dd {
 margin-left: 50px;
 width: calc(100% - 50px);
}

#caption {
 height: 50px;
 width: 100%;
 resize: none;
 border: thin solid #000;
 color: #CECECE;
 background: #FFF;
 font-family: sans;
 font-size: 13px;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(function() {
  var $textarea = $('#caption');
  var lineHeight = parseInt($textarea.css('lineHeight'));
  $textarea.on('input', function(e) {
    var lines = ($(this).val() + '\n').match(/\n/g).length;
    $(this).height(lineHeight * lines);
  });
});

$(function() {
    var h = $('#caption').outerHeight(); 
    $('ul').css('margin-top',h);
</script>

現状

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

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

Comments

[mix-peach]

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

[gedachtnis]

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

お手数おかけしてしまい申し訳ございませんでした。

Answer 1

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

form {
 position: relative;
 height: 50px;
 vertical-align: middle; 
}

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

#caption {
 height: 50px;
 width: 100%;
 resize: none;
 border: thin solid #000;
 color: #CECECE;
 background: #FFF;
 font-family: sans;
 font-size: 13px;
 line-height: 26px;
}

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