JS //= require bootstrap-sprockets breaks dropdowns #714

ahnbizcad · 2014-09-08T18:02:36Z

I've isolated that the line
//= require bootstrap-sprockets
in the application.js manifest will prevent dropdowns in navbars from showing for ruby on rails.
Whether this line comes before or after the //= require bootstrap line doesn't seem to matter. Either way, it breaks dropdowns.

Using @import "bootstrap-sprockets"; for the CSS mainfest doesn't break dropdowns. Only including it in the js does.

To reproduce, use:

ruby 2.0.0
rails 4.1.1
sass-rails (4.0.3)
bootstrap-sass (3.2.0.1)
autoprefixer-rails (2.2.0.20140804)
gem 'sprockets-rails', :require => 'sprockets/railtie'

The text was updated successfully, but these errors were encountered:

thomas-mcdonald · 2014-09-09T14:57:58Z

If you're using bootstrap-sprockets in Javascript you don't need to include bootstrap as well. I imagine this is what is breaking things.

dkonayuki · 2014-09-10T10:36:52Z

Well, somehow I need to include both of these following lines in production mode. Otherwise my dropdown menu won't work.

//= require bootstrap
//= require bootstrap-sprockets

Btw, in development mode, I only need the bootstrap-sprockets.

I'm using:

Ruby 2.1.1p76
Rails 4.1.0
sass-rails (4.0.3)
bootstrap-sass (3.2.0.1, 3.1.0.2)

glebm · 2014-09-10T16:50:24Z

bootstrap has all of JS concatenated in 1 file, while bootstrap-sprockets has a //= require directive for each component. You must not include both, as this includes all of Bootstrap Javascript twice.

dkonayuki · 2014-09-12T11:14:52Z

I understand. But all the dropdown stop working if I include only bootstrap or only bootstrap-sprockets in js file.
Here is my application.js file:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require bootstrap-select.js
//= require bootstrap-tagsinput.js
//= require handlebars.js
//= require typeahead.bundle.js
//= require wysihtml5
//= require bootstrap-editable
//= require jquery-fileupload
//= require jquery.ui.all
//= require jquery.magnific-popup.js
//= require jquery.autosize
//= require owl.carousel.js
//= require fileinput.js
//= require masonry.pkgd.js
//= require jquery.gritter.js
//= require_tree .

gonzaloaune · 2014-09-19T04:42:41Z

Im having the exact same problem as dkonayuki, including bootstrap-sprockets breaks dropdown menus

dkonayuki · 2014-09-30T17:09:27Z

I think this issue should be opened. There are some other people have this issue too in stackoverflow. And no solution so far.

sibsfinx · 2014-10-16T16:02:27Z

got same problem too
maybe related to paths changes since v3.2.0 (assets folder moved from vendor to root)
try rolling back to v3.1.1+x — worked for me

kirqe · 2014-12-16T18:45:08Z

@dkonayuki , have you tried to move them up and down? I removed //= require bootstrap-sprockets and I have this now:

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

The only dropdown list I have is working fine.

$(document).ready(function(){
    $('.dropdown-toggle').dropdown();
});

http://stackoverflow.com/questions/27679719/bootstrap-dropdown-doesnt-work-in-production/27680416#27680416

VelizarHristov · 2014-12-16T20:41:03Z

This shouldn't be closed, I am having the issue too.

Requiring it after jquery-ui fixed it for me - there is probably a conflicting variable name. I was using the following combobox: http://jqueryui.com/autocomplete/#combobox
At first I thought that the issues are because the combobox from the page is unfinished and unsupported. Which is unfortunate, because I cannot find any other widely used autocomplete combobox on the web.

Here is a part of my code, in an attempt to reproduce it. I have omitted the CSS because it didn't affect the bug.

application.js:
//= require jquery
//= require jquery_ujs

//= require jquery-ui
//= require bootstrap-sprockets

test.html:
[copy-paste the source at http://jqueryui.com/autocomplete/#combobox - exactly 200 lines of code as of writing this comment]

The dropdown and autocomplete still work, but the arrow for displaying the dropdown items disappears. Normal dropdowns (i.e. without calling $( '#element' ).combobox()) work as usual for me. The disappearing arrow issue was in both Chrome and Firefox (latest versions).

glebm · 2014-12-17T14:46:31Z

@VelizarHristov select2 is a better combobox.

ANG3L0 · 2014-12-26T00:32:44Z

I don't know if this helps, but I am using sass and had the following problem:
My dev environment wants this order (otherwise it wouldn't work):
application.js:
//= require jquery
//= require jquery_ujs
//= require bootstrap

but my production env wants this order (otherwise it wouldn't work):
//= require bootstrap
//= require jquery
//= require jquery_ujs

Confused and frustrated I kept digging around the .js and tweaked with rails versions and everything and comparing the against a site whose dropdown menu did work and all the .css and .js order looked OK. It turns out the problem was not in my .js but in my application.css. I am using SASS and was using application.css sprocket directives (//= require 'blah') but that turns out to not play well with SASS. (source: http://guides.rubyonrails.org/asset_pipeline.html).

"""
If you want to use multiple Sass files, you should generally use the Sass @import rule
instead of these Sprockets directives. When using Sprockets directives, Sass files exist within
their own scope, making variables or mixins only available within the document they were defined in.
"""
So all my @imports would only work if I shoved everything in one .css.scss file, which I don't really want to do.

So my old application.css file had the following:

*= require 'global' <--this had my @imports for bootstrap/boostrap-sprockets, but no one else could see this
*= require font-awesome
*= require_self
*= require_tree .

And so I moved it to application.css.sass and had the following instead (e.g. deleting all the sprockets //= directives):
+@import "font-awesome"
+@import "bootstrap-sprockets"
+@import "bootstrap"
+@import "*/" <--recursive import, same as =require_tree .

After that, I got my dev environment and my production environment to finally work (and I just kept my bootstrap after jquery).

kirqe · 2014-12-27T17:36:46Z

@ugghhh

xd

sean-perryman · 2015-03-20T16:02:31Z

Removing the require for bootstrap-sprockets fixed the issue for me as well. Not sure what else it is going to affect, but for now I am leaving it out.

14tinchov · 2015-07-13T15:07:57Z

@ugghhh
Could you solve that problem? the same happens to me

This is my application.js

//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require bootstrap
//= require jquery-ui
//= require jquery.validate
//= require jquery.validate.additional-methods
//= require moment
//= require bootstrap-datepicker
//= require bootstrap-datetimepicker

In production doesn't work... Is there any alternative for drop down?

dougharman · 2015-07-13T15:33:32Z

It has to do with the order of the files. Bootstrap and
bootstrap-sprockets need to be BELOW your jQuery in application.js:

Javascript / application.js

//= require jquery

//= require jquery.turbolinks

//= require jquery_ujs

//= require jquery-fileupload

//= require jquery-ui

//= require jquery-ui/datepicker

//= require bootstrap-sprockets

//= require bootstrap

//= require bootstrap-select

//= require bootstrap/alert

//= require bootstrap/dropdown

//= require turbolinks

//= require_tree .

Stylesheets / application.css.scss

@import "jquery-ui";

@import "bootstrap-sprockets";

@import "bootstrap";

@import "custom";

@import "bootstrap-progressbar-3.3.0";

@import "bootstrap-progressbar-3.3.0.min";

@import "bootstrap-select";

@import "jquery.fileupload";

@import "jquery.fileupload-ui";

Also, if you add turbolinks, you'll need to do this in the View:

<%= link_to 'Sign in', new_user_session_path, "data-no-turbolink" => true %>

I can't recall why that was needed...

Best, Doug Harman

From: 14tinchov [mailto:[email protected]]
Sent: Monday, July 13, 2015 10:08 AM
To: twbs/bootstrap-sass
Cc: Doug Harman
Subject: Re: [bootstrap-sass] JS //= require bootstrap-sprockets breaks
dropdowns (JS //= require bootstrap-sprockets breaks dropdowns #714)

@ugghhh https://github.com/Ugghhh
Could you solve that problem? the same happens to me

This is my application.js

//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require bootstrap
//= require jquery-ui
//= require jquery.validate
//= require jquery.validate.additional-methods
//= require moment
//= require bootstrap-datepicker
//= require bootstrap-datetimepicker

In production doesn't work... Is there any alternative for drop down?

Reply to this email directly or view it on GitHub
<JS //= require bootstrap-sprockets breaks dropdowns #714 (comment)
3> .
<https://github.com/notifications/beacon/AFdiToVUEXLCMP7YTMmkuqXpIjMX0w4
Qks5oc8vlgaJpZM4Cft3R.gif>

This email has been scanned by the Symantec Email Security.cloud
service.
For more information please visit http://www.symanteccloud.com

This email has been scanned by the Symantec Email Security.cloud service.
For more information please visit http://www.symanteccloud.com

glebm · 2015-07-14T01:09:24Z

Do not require both bootstrap and bootstrap-sprockets in the JavaScript, you only need one of them

vinamelody · 2015-10-27T15:57:43Z

Hi, sorry to bring this up again, what was the solution that works for this? I am having this issue now.

The css ::after (down arrow) is not appearing on the navigation.

application.scss

*= require_tree .
 *= require_self
 *= require font-awesome

application.js

//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require turbolinks
//= require bootstrap-sprockets
//= require bootstrap/dropdown
//= require_tree .
//= require brave/placeholders.js
//= require brave/respond.min.js
//= require brave/html5shiv.js
//= require brave/main.js

$(document).ready(function(){
    $('.dropdown-toggle').dropdown();
});

Thanks in advanced!

dougharman · 2015-10-27T22:51:21Z

That was a long time ago. My recollection is that the key is the order
of the require's. Just taking a quick look at your code (a) tree
belongs at the bottom and (b) so does turbolinks (before tree). I also
believe / recollect that turbolinks needs to be below bootstrap
require's. Good luck with it, Doug

From: Vina Melody [mailto:[email protected]]
Sent: Tuesday, October 27, 2015 10:58 AM
To: twbs/bootstrap-sass
Cc: Doug Harman
Subject: Re: [bootstrap-sass] JS //= require bootstrap-sprockets breaks
dropdowns (#714)

Hi, sorry to bring this up again, what was the solution that works for
this? I am having this issue now.

The css ::after (down arrow) is not appearing on the navigation.

application.scss

*= require_tree .
*= require_self
*= require font-awesome

application.js

//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require turbolinks
//= require bootstrap-sprockets
//= require bootstrap/dropdown
//= require_tree .
//= require brave/placeholders.js
//= require brave/respond.min.js
//= require brave/html5shiv.js
//= require brave/main.js

$(document).ready(function(){
$('.dropdown-toggle').dropdown();
});

Thanks in advanced!

Reply to this email directly or view it on GitHub
<#714 (comment)
6> .
<https://github.com/notifications/beacon/AFdiTnzChpSin6pmXkaZdJDkznnLFdd
wks5o_5aRgaJpZM4Cft3R.gif>

This email has been scanned by the Symantec Email Security.cloud
service.
For more information please visit http://www.symanteccloud.com

This email has been scanned by the Symantec Email Security.cloud service.
For more information please visit http://www.symanteccloud.com

kirqe · 2015-10-28T12:56:26Z

Here's what I have in my latest proj

application.scss

 *= require_tree .
 *= require_self
 *= require foundation_and_overrides

application.js

//= require jquery
//= require jquery_ujs
//= require_tree .
//= require jquery.turbolinks    
//= require foundation  
//= require turbolinks

vinamelody · 2015-10-28T14:12:39Z

Hi @dougharman and @railsr thank you so much for giving me the clue! I play around with the order and just dumping all the js from template and managed to somehow make it work!

Just in case any next fellow experiencing similar issue, I only fixed application.js which look like this now

//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require bootstrap-sprockets
//= require brave/placeholders
//= require brave/jquery.magnific-popup.min
//= require brave/owl.carousel.min
//= require brave/respond.min
//= require brave/html5shiv
//= require brave/main
//= require_tree .
//= require turbolinks

Thanks a lot again!

dougharman · 2015-10-28T14:27:36Z

Not sure about your css / scss file - I don't have tree in mine.
Believe it should be at the bottom if needed.

Application.js file should be in this order:

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
Other files, e.g., //= require foundation , do here
//= require turbolinks
//= require_tree .

From: Kirill [mailto:[email protected]]
Sent: Wednesday, October 28, 2015 7:57 AM
To: twbs/bootstrap-sass
Cc: Doug Harman
Subject: Re: [bootstrap-sass] JS //= require bootstrap-sprockets breaks
dropdowns (#714)

Here's what I have in my latest proj

application.scss

*= require_tree .
*= require_self
*= require foundation_and_overrides

application.js

//= require jquery
//= require jquery_ujs
//= require_tree .
//= require jquery.turbolinks
//= require foundation
//= require turbolinks

Reply to this email directly or view it on GitHub
<#714 (comment)
9> .
<https://github.com/notifications/beacon/AFdiTn-z06THW90HvKAgqpVgYADoS8i
6ks5pAL2SgaJpZM4Cft3R.gif>

This email has been scanned by the Symantec Email Security.cloud
service.
For more information please visit http://www.symanteccloud.com

This email has been scanned by the Symantec Email Security.cloud service.
For more information please visit http://www.symanteccloud.com

vinamelody · 2015-10-28T14:30:12Z

the require_tree in scss seems to be fine as of now

ah yes thanks for your advice, moved //= require_tree . to the lowest line possible.

dougharman · 2015-10-28T14:30:14Z

I'm glad it worked. One further suggestion, this order for turbolinks
and tree:
//= require turbolinks
//= require_tree .

Best, Doug

From: Vina Melody [mailto:[email protected]]
Sent: Wednesday, October 28, 2015 9:13 AM
To: twbs/bootstrap-sass
Cc: Doug Harman
Subject: Re: [bootstrap-sass] JS //= require bootstrap-sprockets breaks
dropdowns (#714)

Hi @dougharman https://github.com/dougharman and @railsr
https://github.com/railsr thank you so much for giving me the clue! I
play around with the order and just dumping all the js from template and
managed to somehow make it work!

Just in case any next fellow experiencing similar issue, I only fixed
application.js which look like this now

//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require bootstrap-sprockets
//= require brave/placeholders
//= require brave/jquery.magnific-popup.min
//= require brave/owl.carousel.min
//= require brave/respond.min
//= require brave/html5shiv
//= require brave/main
//= require_tree .
//= require turbolinks

Thanks a lot again!

Reply to this email directly or view it on GitHub
<#714 (comment)
7> .
<https://github.com/notifications/beacon/AFdiTo2qWy9RiQWbSoMk_GiA0sS2yBW
Hks5pAM9ugaJpZM4Cft3R.gif>

This email has been scanned by the Symantec Email Security.cloud
service.
For more information please visit http://www.symanteccloud.com

This email has been scanned by the Symantec Email Security.cloud service.
For more information please visit http://www.symanteccloud.com

vinamelody · 2015-10-28T14:31:22Z

Yup!

bmckibben · 2015-12-29T20:22:53Z

I realize this thread is a bit old, but I had a the same issue with the dropdowns. The cause was that I had jquery js files that were being included by //=require_tree .

Once I removed those files, it worked.

thomas-mcdonald closed this as completed Sep 9, 2014

twbs locked and limited conversation to collaborators Dec 29, 2015

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

JS //= require bootstrap-sprockets breaks dropdowns #714

JS //= require bootstrap-sprockets breaks dropdowns #714

ahnbizcad commented Sep 8, 2014

thomas-mcdonald commented Sep 9, 2014

dkonayuki commented Sep 10, 2014

glebm commented Sep 10, 2014

dkonayuki commented Sep 12, 2014

gonzaloaune commented Sep 19, 2014

dkonayuki commented Sep 30, 2014

sibsfinx commented Oct 16, 2014

kirqe commented Dec 16, 2014

VelizarHristov commented Dec 16, 2014

glebm commented Dec 17, 2014

ANG3L0 commented Dec 26, 2014

kirqe commented Dec 27, 2014

sean-perryman commented Mar 20, 2015

14tinchov commented Jul 13, 2015

dougharman commented Jul 13, 2015

glebm commented Jul 14, 2015

vinamelody commented Oct 27, 2015

dougharman commented Oct 27, 2015

kirqe commented Oct 28, 2015

vinamelody commented Oct 28, 2015

dougharman commented Oct 28, 2015

vinamelody commented Oct 28, 2015

dougharman commented Oct 28, 2015

vinamelody commented Oct 28, 2015

bmckibben commented Dec 29, 2015

JS //= require bootstrap-sprockets breaks dropdowns #714

JS //= require bootstrap-sprockets breaks dropdowns #714

Comments

ahnbizcad commented Sep 8, 2014

thomas-mcdonald commented Sep 9, 2014

dkonayuki commented Sep 10, 2014

glebm commented Sep 10, 2014

dkonayuki commented Sep 12, 2014

gonzaloaune commented Sep 19, 2014

dkonayuki commented Sep 30, 2014

sibsfinx commented Oct 16, 2014

kirqe commented Dec 16, 2014

VelizarHristov commented Dec 16, 2014

glebm commented Dec 17, 2014

ANG3L0 commented Dec 26, 2014

kirqe commented Dec 27, 2014

sean-perryman commented Mar 20, 2015

14tinchov commented Jul 13, 2015

dougharman commented Jul 13, 2015

glebm commented Jul 14, 2015

vinamelody commented Oct 27, 2015

dougharman commented Oct 27, 2015

kirqe commented Oct 28, 2015

vinamelody commented Oct 28, 2015

dougharman commented Oct 28, 2015

vinamelody commented Oct 28, 2015

dougharman commented Oct 28, 2015

vinamelody commented Oct 28, 2015

bmckibben commented Dec 29, 2015