検索エリアとボタンがズレてしまう件

Question

#やりたいこと
検索エリアと検索ボタンのズレを直したい

#問題点
Bootstrap4を用いて検索エリアとボタンを並べて表示しようとしていますが、スクリーンショットのようにズレてしまいます。

#該当コード

<div class="row">
    <div class="col-md-8 mx-auto">
      <%= form_with model: [@post, @comment], local: true, :class => 'comment_form' do |f| %>
        <div class="input-group mb-3">
          <%= f.text_field :content, :class => "form-control", :placeholder => "コメントの内容を入力...", "aria-label" => "...", "aria-describedby" => "button-addon2" %>
          <div class="input-group-append">
            <%= f.submit "コメント", :id => "button-addon2", :class => "btn btn-outline-secondary" %>
          </div>
        </div>
      <% end %>
    </div>
  </div>

どうしたら直せるでしょうか。よろしくお願いします。

Answer 1

CSSが効かないということは僕も時々あるのですが、HTMLのタグに直でstyleをオプションで指定すると解決することがあります。

Comments

[shinjia305]

sanpo_shihoさん、回答ありがとうございます。
ご指摘の通り、styleオプションを追加してみました。「:style => "height: 20px;"」と言うような形で指定してみましたが、Cssが効かずといった感じです。スタイルタグでも試しましたが、直りませんでした。
いやー、なんでかなぁこれ。

```
<%= form_with model: [@post, @comment], local: true, :class => 'comment_form' do |f| %>
<div class="input-group mb-3">
<%= f.text_field :content, :class => "form-control comment-form-height", :placeholder => "コメントの内容を入力...", "aria-label" => "...", "aria-describedby" => "button-addon2" %>
<div class="input-group-append">
<%= f.submit "コメント", :id => "button-addon2", :class => "btn btn-outline-secondary comment-form-height", :style => "height: 20px;" %>
</div>
</div>
<% end %>
```

[sanpo_shiho]

min-heightなどの別の制約はかかっていませんか？？
（chromeであれば右クリック→検証で実際にその要素にどのようなスタイルが適応されているか見ることができます。）

Answer 2

cssが書いてないので、あまり把握できませんが。
コメントボタンのbtnかbtn-outline-secondaryクラスにheightを指定して、text_fieldの高さに合わせてみてはいかがでしょうか？

Comments

[shinjia305]

回答ありがとうございます。
この検索エリア、検索ボタンにおけるCssは、現状何も書いてない状況です。
確かにご指摘の通りCSSで調整できないかと思い試してみました。引数に「'height': '15px'」等を加えてみましたが、CSSがきかないようです。ふーむ。

[tomtom1]

CSSが効かないのはおかしいですね。
例えば、一番先頭のclass="row"に適当にcssつけて反映されるかご確認下さい。
反映されなければ、cssファイルとのlinkがうまくいってないですね。

ちなみに、「'height': '15px'」のheightを囲む''は不要ですがどうでしょう？
.btn{
height:15px;
}