bootstrap3 input-group 内で textarea と button の高さを合わせたい

http://bootstrap3.cyberlab.info/components/inputGroups.html

input-grpup に text-area をいれたとき
input-group-addon は普通に使えるのですが
input-group-btn を使うと高さがずれてしまいます

input-group にこだわる必要はないのですが
bootstrap3 でtextarea とボタンを１行で見栄え良く配置する方法はないでしょうか

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrapの基本テンプレート</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

      <div class="input-group">
        <span class="input-group-addon">テキスト</span>
        <textarea class="form-control" placeholder="テキスト入力欄"></textarea>
        <span class="input-group-btn">
          <button type="button" class="btn btn-default">ボタン</button>
        </span>
      </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  </body>
</html>

maisumakun

2019/04/02 12:21

textareaなのに1行分の高さしかないと、「長いものを打ったときに見づらい」「複数行の入力が可能だと気づきづらい」問題点が考えられますが、そのあたりは問題ないでしょうか。

退会済みユーザー

2019/04/02 12:47

できれば複数行にしたいので textarea を１行にするのではなく左側のテキストのようにボタンを textarea の高さにする方法はないのでしょうか button に height100% とか input-group-btn に padding 0 とかを設定してみたのですがうまくいかなくて…

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

回答1件

ベストアンサー

heightプロパティを使用することで、質問者さんの実現したいことは行えると思います(動作確認用リンク)。

CSS
1.input-group, .input-group-btn, .btn {
2  height: 100%; 
3}

投稿2019/04/03 00:34

s8_chu

総合スコア14731

退会済みユーザー

2019/04/03 00:58

外側の input-group にも height100%が必要だったのですねありがとうございました！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.31%

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

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

質問する

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

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

bootstrap3 input-group 内で textarea と button の高さを合わせたい

関連した質問