CODEWITHSUNDEEP
ruby-on-railsbootstrap-4
Sheshang
Sheshang

Reputation: 83

Bootstrap Dropdown is not working in Ruby on Rails

I am new to rails development. I am creating one Rails app. In which I am using Bootstrap 4.0.0 beta. I have one navbar in particular div, (not on whole page). But problem is, dropdown is not working when I click on it. For that first I have to click on nav-brand first, then I can click on dropdown and it works. But it changes whole placings of navbar. and again if I click on nav-brand dropdown stops working.

I also tried putting it on whole page there is also same problem.

I have ruby-2.4.1, rails-5.1.3, bootstrap-4.0.0beta

Here is my /assets/stylesheets/application.css code 

*= require bootstrap

And this is /assets/stylesheets/welcomeindex.css code 

*= require bootstrap
*= require application

body, .jumbotron{
  height: 100vh;
  min-height: calc(100vh - 155px);
  //overflow: hidden;
}

.jumbotron{
  margin-bottom: 0px;
}

@media (max-width: 991px) {

  .jumbotron{
    height: 100%;
  }

} 

.footer {
   position: fixed;
   bottom: 0;
   width: 100%;
   height: 40px;
   line-height: 40px;
   background-color: #f5f5f5;

  .container {
    width: auto;
    max-width: 680px;
    padding: 0 15px;
  }
}

This application.js file: 

//= require jquery
//= require jquery_ujs
//= require popper
//= require turbolinks
//= require bootstrap-sprockets
//= require bootstrap
//= require_tree .

And this is welcomeindex.html.erb file: 

<html>
  <head>
    <title> Fest Management </title>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= stylesheet_link_tag    'welcomeindex', media: 'all', 'data-turbolinks-track' => true %>
  </head>

  <body>
    <div id="main-container" class="container-fluid">

      <div class="row">

        <div class="jumbotron col-lg-8 col-md-12">
        </div>

        <div class="jumbotron col-lg-4 col-md-12">

          <nav class="navbar navbar-light bg-light">
            <div class="navbar-header">
              <a href="#" class="navbar-brand">Brand</a>
            </div>
            <div id="navbarCollapse">
              <ul class="nav navbar-nav">
                <li class="dropdown">
                  <a data-toggle="dropdown" class="dropdown-toggle" href="#">Messages <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Inbox</a></li>
                    <li><a href="#">Drafts</a></li>
                    <li><a href="#">Sent Items</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Trash</a></li>
                  </ul>
                </li>
              </ul>
           </div>
        </nav>

      </div>

      <footer class="footer navbar-fixed-bottom">
         <div class="container">
           <span class="text-muted">Place sticky footer content here.</span>
         </div>
      </footer>

     </div>

    </div>

  </body>
</html>

So where am I missing? It would be great help.

EDIT
after solving the issue of dropdown click, I am getting the issue with CSS of navbar. when i expand dropdwon, rather than poping out of navabar area, it increases the height of navbar and shows whole list in it.

here is the edited index.html.erb file. Along with the edits suggested I have completely removed CSS references and still it giving the same problem for CSS. 

<div id="main-container" class="container-fluid">

  <div class="row">

    <div class="jumbotron col-lg-8 col-md-12">
    </div>

    <div class="jumbotron col-lg-4 col-md-12">
      <nav class="navbar navbar-light bg-light">
        <div class="navbar-header">
          <a href="#" class="navbar-brand">Brand</a>
        </div>
        <div id="navbarCollapse">
          <ul class="nav navbar-nav">
            <li class="dropdown show">
              <a data-toggle="dropdown" class="dropdown-toggle" href="#" id="CategoryDD" aria-haspopup="true" aria-expanded="false">Messages <b class="caret"></b></a>
              <ul class="dropdown-menu" aria-labelledby="CategoryDD">
                <li><a href="#">Inbox</a></li>
                <li><a href="#">Drafts</a></li>
                <li><a href="#">Sent Items</a></li>
                <li class="divider"></li>
                <li><a href="#">Trash</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </nav>
    </div>

    <footer class="footer navbar-fixed-bottom">
      <div class="container">
       <span class="text-muted">Place sticky footer content here.</span>
     </div>
    </footer>

  </div>

</div>

Upvotes: 2

Views: 13509

Answers (4)

CHAVDA MEET
CHAVDA MEET

Reputation: 935

Same issue, but solved with this kind of doing...

Did you overwrite bootstrap CDN or install any kind of bootstrap things like example of:

 <!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

If you're having this kind of in application.html.erb then kindly remove all kind of this...

and clear all cdn links and add again bootstap link

Thank you.

Upvotes: 0

Pshemski
Pshemski

Reputation: 119

Adding to application.js

//= require jquery-ui

right after 

//= require jquery

worked for me like a charm. Hopefully, this will solve someone's issue too.

Upvotes: 2

Rabin Poudyal
Rabin Poudyal

Reputation: 778

You have added bootstrap but not jquery. Since bootstrap depends on jquery you must also add it. Before Rails 5, jquery used to be default in Rails app but Rails team removed it after Rails 5. If you want to use it then you should add this gem to your Gemfile. Here is the link https://github.com/rails/jquery-rails

Upvotes: 0

Graham Slick
Graham Slick

Reputation: 6870

You shouldn't add body and html tags in a view. You also shouldn't add 

<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

All of this is usually already defined in application.html.erb which is the "skeleton" of your views.

Regarding your issue:

According to the documentation, you're missing an id on the a tag.

<div class="dropdown show">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Try removing any custom classes you've added and simply use this snippet. Should work out of the box if you leave all their elements.

If it still doesn't work, try running this in your console: 

$('.dropdown-toggle').dropdown()

And let us know if there is an error.

Upvotes: 0

Related Questions