ヘッダのドロップダウンがうまく設定できない。。。（泣）

Question

Railsで開発しているWEBソフトにBoot strap4を導入し、navでヘッダを作ろうとしています。
ドロップダウンを入れてみたのですが問題が2つ出てきました。

1. 2回クリックしないとドロップダウンメニューが開かない

一回目のクリックでは何も反応がなく、二回目のクリックでドロップダウンメニューが表示されます。これを一回目から表示されるようにしたいんです、、、

2.ドロップダウンメニューが開いた際にヘッダのレイアウトが崩れてしまう

メニューを開く前

メニューを開いた後

ドロップダウンがヘッダ内に表示されてしまって背景がびよーんと下方向に拡大されてしまいます。

これをヘッダの範囲外に表示して、ヘッダのレイアウトに影響がないようにしたいです。

やってみたこと

検証を見て表示されるCSSを見ながらいろいろ試してみましたが、改善はできませんでした。。。

下記にヘッダパーシャルのhtml,scss,gemのコードを添付します。
どうぞよろしくお願いいたします。

<nav class="navbar navbar-fixed-top navbar-dark bg-primary">
  <div class="container">
    <a href="/" class="navbar-brand">
      Body-Weight App
    </a>
    <ul class="navbar-nav">
      <% if logged_in? %>
        <li><a  href="/" class="nav-link">Home</a></li>
        <li><a  href="#" class="nav-link">Help</a></li>
        <li  class="dropdown">
          <a href="#"  class="dropdown-toggle nav-link" data-toggle="dropdown"  role="button" aria-expanded="false">Account<span  class="caret"></span></a>
          <ul  class="dropdown-menu" role="menu">
             <li><a  href="#">メニュー1</a></li>
             <li><a  href="#">メニュー2</a></li>
          </ul>
        </li>
      <% else %>
        <li><a  href="#" class="nav-link">Help</a></li>
      <% end %>
    </ul>
  </div>
</nav>

@import "bootstrap";

$main-blue:#428bca;
$light-gray:#777777;

li{
  list-style: none;
}


.navbar-nav{
  flex-direction: row;
  li{
    margin-left: 15px;
  }
}

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.6.3'
gem 'rails', '~> 5.2.3'
gem 'bcrypt',         '3.1.12'
gem 'puma', '~> 3.11'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.2'
gem 'turbolinks', '~> 5'
gem 'jbuilder', '~> 2.5'
gem 'bootsnap', '>= 1.1.0', require: false
gem 'bootstrap', '~> 4.1.1'
gem 'jquery-rails', '4.3.1'


group :production do
  gem 'pg', '0.20.0'
  gem 'fog', '1.42'
end

group :development, :test do
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  gem 'sqlite3'
end

group :development do
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 3.2'
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

group :test do
  gem 'capybara', '>= 2.15'
  gem 'selenium-webdriver'
  gem 'chromedriver-helper'
  gem 'rails-controller-testing', '1.0.2'
  gem 'minitest',                 '5.10.3'
  gem 'minitest-reporters',       '1.1.14'
  gem 'guard',                    '2.13.0'
  gem 'guard-minitest',           '2.4.4'
end

gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]


gem 'faker',          '1.7.3'
gem 'carrierwave',             '1.2.2'
gem 'mini_magick',             '4.7.0'
gem 'will_paginate',           '3.1.6'
gem 'bootstrap-will_paginate', '1.0.0'

Answer 1

一度こちらに書いてる通りに記載して、そこから変更していくといいと思いますよ！
https://getbootstrap.com/docs/4.0/components/navbar/#supported-content

ドロップダウンメニューが開いた際にヘッダのレイアウトが崩れてしまう

こちらに関して、下記のように書けば直ると思います！

    <nav class="navbar navbar-expand-lg navbar-dark bg-primary"> // navbar-fixed-topから変更
        <div class="container">
          <a href="/" class="navbar-brand">
            Body-Weight App
          </a>
          <div id="navbarNavDropdown">
            <ul class="navbar-nav">
                <li class="nav-item"><a href="/" class="nav-link">Home</a></li>
                <li class="nav-item"><a href="#" class="nav-link">Help</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown"  role="button" aria-expanded="false">Account<span  class="caret"></span></a>
                  <ul class="dropdown-menu" role="menu">
                     <li><a href="#">メニュー1</a></li>
                     <li><a href="#">メニュー2</a></li>
                  </ul>
                </li>
            </ul>
          </div>
        </div>
      </nav>

2回クリックしないとドロップダウンメニューが開かない

こちらに関しては、試してみましたが再現できませんでした。（クリックしたら開いた）
一度JSなどでAccountをクリックしたらconsole.log()でクリックしたと出力してみるのはいかがでしょうか？
流石に何回もはないと思いますが、一度目にクリックできていない可能性もありますので。

Comments

[tttu]

いつもありがとうございます!
クリックの問題に関しては、他から持ってきた複数のhtmlコードに代替しても同様の現象が起きたのでhtmlコードの問題ではないことがわかりました。

jsの方法も試してみます。他の部分、gemやrouteなどに問題があるかもしれないので広い範囲で検討しなきゃいけないかもです（泣）

[fumito_94]

jsはちゃんと定義されていますでしょうか？
https://getbootstrap.com/
こちらにJSが置いてあるので、そこからコピーして一度試してみるといいかもしれないです。

[tttu]

まさにそれでした・・・ありがとうございます。

ただそのままだと、一回目のクリックでドロップダウンが開いたまま閉じなくなってしまったので「<script・・・」3行のうち一番上、jqueryの行を一番下にしたら正常に動作するようになりました。

定義の順番によって挙動が異なることはよくあるのでしょうか？

[tttu]

なんとか正規の定義方法で解決したいのですが、なかなかうまくいかない状況です。考えられる問題をお教えいただければ幸いですm(_ _)m

[tttu]

application.jsファイルの「//= require jquery」を消したらできました。
ありがとうございました。

Answer 2

2つ目の問題、「ドロップダウンメニューが開いた際にヘッダのレイアウトが崩れてしまう」は解決しました。
一番上のnavタグに「navbar-expand-・・・」の指定が抜けていました。

1つ目の問題についてはまだ未解決です。

Comments

[fumito_94]

すみません、画面を更新しておらず、回答者さんがすでに解決されている一つめに関しての回答を書いてしまいました。