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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

2回答

1821閲覧

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

ShinjiAsai

総合スコア51

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2019/12/20 12:55

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

#問題点
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>

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

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

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

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

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

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

guest

回答2

0

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

投稿2019/12/21 03:47

sanpo_shiho

総合スコア18

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

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

ShinjiAsai

2019/12/21 04:46 編集

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

2019/12/21 04:47

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

0

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

投稿2019/12/20 14:59

tomtom1

総合スコア168

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

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

ShinjiAsai

2019/12/21 02:18 編集

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

2019/12/21 04:50

CSSが効かないのはおかしいですね。 例えば、一番先頭のclass="row"に適当にcssつけて反映されるかご確認下さい。 反映されなければ、cssファイルとのlinkがうまくいってないですね。 ちなみに、「'height': '15px'」のheightを囲む''は不要ですがどうでしょう? .btn{ height:15px; }
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問