標準時に指定サイズでtextareaが表示されるようにしたい。

Question

前提・実現したいこと

標準時に指定サイズでtextareaが表示されるようにしたい。

発生している問題・エラーメッセージ

ページへ遷移した際に、指定のサイズでテキストエリアが表示されない。
デザイン上なんとか固定させたい.....

該当のソースコード

<form class="form-horizontal" role="form" method="post" action="contact.php">
          <div class="form-group">
            <div class="col-sm-12">
              <input type="text" class="form-control" id="name" placeholder="Name" name="name" value="">
            </div>
          </div>

          <div class="form-group">
            <div class="col-sm-12">
              <input type="email" class="form-control" id="email" placeholder="Email" name="email" value="">
            </div>
          </div>
          <textarea class="form-control" id="textarea" rows="10" placeholder="Message" name="message" style="margin-top: 0px; margin-bottom: 0px; height: 160px;"></textarea>
          <button class="btn btn-primary send-button" id="submit" type="submit" value="SEND">
            <div class="button">
              <i class="fa fa-paper-plane"></i><span class="send-text">Send</span>
            </div>
          </button>
        </form>

#contact {
  width: 100%;
  height: 100vh;
  background-color: #111;
  background:linear-gradient(white 0%,white 70%,#111 70%,#111 100%);
  overflow: hidden;
  padding-bottom: 200px;
}


.contact-wrapper {
  margin: 0 auto;
  padding-top: 180px;
  position: relative;
  max-width: 800px;
}

/* Begin Left Contact Page */
.form-horizontal {
  float: left;
  max-width: 400px;
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
}

.form-control, textarea {
  resize: vertical;
  height: 34px;
  width: 400px;
  background-color: white;
  letter-spacing: 1px;
}

.send-button {
  margin-top: 15px;
  height: 34px;
  width: 400px;
  overflow: hidden;
  transition: all .2s ease-in-out;
}

.button {
  width: 400px;
  height: 34px;
  transition: all .2s ease-in-out;
}

.send-text {
  display: block;
  margin-top: 10px;
  font-family: 'Raleway', sans-serif;
  letter-spacing: 2px;
}

.button:hover {
  transform: translate3d(0px, -29px, 0px);
}

試したこと

ディベロッパーツール上で、以下のサイズが最適であることを確認し、
HTML上で、height: 170px;で指定したが、標準時はtextareaが縮小した状態で表示される。

<textarea class="form-control" id="textarea" rows="10" placeholder="Message" name="message" 　style="height: 170px;" style="margin-top: 0px; margin-bottom: 0px; height: 170px;"></textarea>

Answer 1

<textarea name="kanso" rows="4" cols="40"

colsの指定がないとか

colsの指定がないとか。

Comments

[rrgsn]

回答ありがとうございます！

<textarea class="form-control" id="textarea" rows="30" cols="60" placeholder="Message" name="message"></textarea>

しかし、試みましたがダメでした。

[退会済みユーザー]

切り分けのため一旦cssを当てないで
試したらどうでしょうか。

[rrgsn]

こちらのコメントを理由に、css外して対応したら
別の値が邪魔して正しく設定できていないことがわかりました。
ありがとうございます。

.form-control, textarea {
resize: vertical;
height: 34px;
width: 400px;
background-color: white;
letter-spacing: 1px;
}

>> .form-control の height, widthが影響
form-controlが複数個あったので、削除してid一個一個にcss当てたら解決しました。

[退会済みユーザー]

ご丁寧にありがとうございます。
CSSに強いわけではないので助かりました。

[rrgsn]

焦りからか基本的な事を失念してました。
結果色々と理解深まりました！ありがとうございます！