search

twbs / bootstrap-sass

Official Sass port of Bootstrap 2 and 3.
http://getbootstrap.com/css/#sass
MIT License
12.58k stars 3.53k forks source link

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

Closed ahnbizcad closed 10 years ago

ahnbizcad commented 10 years ago

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'

thomas-mcdonald commented 10 years ago

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 commented 10 years ago

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 commented 10 years ago

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 commented 10 years ago

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 commented 10 years ago

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

dkonayuki commented 10 years ago

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

sibsfinx commented 10 years ago

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 commented 9 years ago

@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 commented 9 years ago

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 commented 9 years ago

@VelizarHristov select2 is a better combobox.

ANG3L0 commented 9 years ago

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:

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 commented 9 years ago

@Ugghhh 400px-1045260_288781257926009_1885057421_n
xd

sean-perryman commented 9 years ago

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 commented 9 years ago

@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 commented 9 years ago

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:notifications@github.com] 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 (#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 . --- 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 commented 9 years ago

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

    vinamelody commented 9 years ago

    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 commented 9 years ago

    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:notifications@github.com] 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 https://github.com/twbs/bootstrap-sass/issues/714#issuecomment-15154982 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 commented 9 years ago

    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 commented 9 years ago

    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 commented 9 years ago

    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:notifications@github.com] 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 https://github.com/twbs/bootstrap-sass/issues/714#issuecomment-15183584 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 commented 9 years ago

    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 commented 9 years ago

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

    Best, Doug

    From: Vina Melody [mailto:notifications@github.com] 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 https://github.com/twbs/bootstrap-sass/issues/714#issuecomment-15185754 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 commented 9 years ago

    Yup!

    bmckibben commented 8 years ago

    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.