Bootswatch dropdown in rails4 doesn't work

Question

I am making a web app using rails 4 and I have choosen bootswatch.

I ran into trouble with dropdown from bootswatch (bootstrap 3).

It doesn't want to show up when I click.

Here is HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'>
    <title>IKStudio</title>
    <link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
    <link data-turbolinks-track="true" href="/assets/bootstrap_and_overrides.css?body=1" media="all" rel="stylesheet" />
    <link data-turbolinks-track="true" href="/assets/exhibits.css?body=1" media="all" rel="stylesheet" />
    <link data-turbolinks-track="true" href="/assets/static.css?body=1" media="all" rel="stylesheet" />
    <script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
    <script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
    <script data-turbolinks-track="true" src="/assets/jquery.turbolinks.js?body=1"></script>
    <script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
    <script data-turbolinks-track="true" src="/assets/exhibits.js?body=1"></script>
    <script data-turbolinks-track="true" src="/assets/jquery.roundabout.min.js?body=1"></script>
    <script data-turbolinks-track="true" src="/assets/static.js?body=1"></script>
    <script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
    <meta content="authenticity_token" name="csrf-param" />
    <meta content="DZN3XrjOOv0yfuqzEZ9b8M5r7gWkkQmY1Z+VtW5Z5VY=" name="csrf-token" />

  </head>
  <body>
    <div class='navbar navbar-default navbar-fixed-top'>
      <div class='container'>
        <div class='navbar-header'>
          <a class="navbar-brand" href="/">TEST</a>
        </div>
        <div class='navbar-collapse collapse' id='navbar-main'>
          <ul class='nav navbar-nav navbar-right'>
            <li><a href="/test">TEST</a></li>
            <li class='dropdown'>
              <a class='dropdown-toggle' data-toggle='dropdown' href='#'>
                KOLEKCIJE
                <b class='caret'></b>
              </a>
              <ul class='dropdown-menu'>
                <li><a href="/">muski</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class='container' id='main'>
      <div class='row'>
        <div class='col-md-2'></div>
        <div class='col-md-8'>
        </div>
        <div class='col-md-2'></div>
      </div>
    </div>
  </body>
</html>

Can you please help..

score 1 · Answer 1 · answered Oct 08 '13 at 11:19

1

You are loading your assets twice. You should only have application.js and application.css in your header and the tree directive in each will load all the other files in the assets path automatically. Here I am using bootstrap and jQuery from gems.

application.js

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery.ui.all
//= require bootstrap
//= require_tree .
//= require turbolinks

application.css

*
*= require_self
*= require jquery.ui.all
*= require_tree .
*/

answered Oct 08 '13 at 11:19

markhorrocks

1,199
19
82
151

No, this what I posted is generated html, I wrote only 2 lines but in haml. `= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true` `= javascript_include_tag "application", "data-turbolinks-track" => true` – Azaryan Oct 08 '13 at 19:56

score 0 · Accepted Answer · answered Oct 08 '13 at 20:04

I have found the solution.

Since I copied bootswatch css code to bootstrap_and_overrides.css.scss i didn't removed require bootstrap, so I wouldn't have 2 bootstraps, but it seems that bootswatch code only revrites some things, and I need the main bootstrap included.

Sorry to bother you with this silly thing.

Bootswatch dropdown in rails4 doesn't work

2 Answers2