Dropdowns not working

[sutherland007]

I was checking the code of the dropdowns and it's showing like this

<li class="has_nested" id="example">
<a href="#">Example</a>           
   <ul>
       <li id="model1"><a href="/admin/">Model1</a></li>
       <li id="model2"><a href="/admin/alumno_induccions">Model2</a></li>
     </ul>
 </li>

So, it should be like this:

<li class="dropdown" id="example"> <-notice the class
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Example</a> <-- added css class, data-toggle and role          
   <ul class="dropdown-menu"> <-- notice the class
       <li id="model1"><a href="/admin/">Model1</a></li>
       <li id="model2"><a href="/admin/alumno_induccions">Model2</a></li>
     </ul>
 </li>

But I only modified that using the web inspector, How can I make permanent?

[sutherland007]

I've "solved" It adding in the active_bootstrap_skin.js file
this:

$('.has_nested').addClass('dropdown');
$('.has_nested > a').addClass('dropdown-toggle');
$('.has_nested > ul').addClass('dropdown-menu');
$('.has_nested > a').attr({
  "data-toggle" : "dropdown",
  "role" : "button",
  "aria-haspopup" : "true",
  "aria-expanded" : "false"
});
$('.has_nested > a').append('<span class="caret"></span>');

accodirng to http://getbootstrap.com/components/#navbar

It changes this:

Into this:

Hope it helps to you in a newer version.

[vinhnglx]

@sutherland007 could you let me know your ActiveAdmin version? I'll check your way at the weekend and get back to you

[sutherland007]

In the footer says Active Admin 1.0.0.pre2 from it's github
rails 4.1.2

[Revinand]

There is no this fix in the repo...

[vinhnglx]

@Revinand I'll update the project example about this gem soon. I guess you guys missing something or has a conflict between versions of Bootstraps, ActiveAdmin...

[krtschmr]

@vinhnglx i got the master (and the gem 0.1.3) and both still not working

[Jamevidi]

same here, not working Active Admin 1.0.0 and latest active_bootstrap_skin

[Jamevidi]

This should work, and for Turbolinks Classic and Turbolinks 5 aswell. :)

try to replace active_bootstrap_skin.js with this:

https://gist.github.com/Jamevid/f78d0236a8ae8a6e8009aa7a1ef032bb

[Jamevidi]

Here is a hack for other dropdowns (other than menu) if someone is interested to try.

To put Inside the document "ready page:load turbolinks:load" part.

$('.dropdown_menu_list_wrapper').contents().unwrap();
$('.dropdown_menu').addClass('dropdown');
$('.dropdown_menu').addClass('dropdown');
$('.dropdown_menu').parent().removeClass('action_item')
$('.dropdown_menu > a').each(function(i, obj) {
$(obj).replaceWith($('' + this.innerHTML + ''));
});
$('.dropdown_menu > button').addClass('btn btn-default dropdown-toggle');
$('.dropdown_menu > button').attr( "data-toggle", "dropdown");
$('.dropdown_menu_list').addClass('dropdown-menu');

[jaxn]

I had this problem today, but was able to solve it by adding jquery to my active_admin.js

//= require jquery
//= require bootstrap-sprockets
//= require active_admin/base
//= require active_bootstrap_skin

I think this is actually part of the bootstrap-sass setup, but maybe it should explicitly be added to the usage instructions in the Readme.

[vinhnglx]

@jaxn I don't think so. The jquery is required in application.js file.

[jaxn]

Yeah, I had forgotten that I also swapped to a different fork. Is there any way we can help you get this one fixed?

…

On Thu, Dec 29, 2016 at 7:09 PM Vinh Nguyen ***@***.***> wrote: @jaxn <https://github.com/jaxn> I don't think so. The jquery is required in application.js file. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#9 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABxp3rsSgFPgms0ZlFHFLMJc0rx1zLkks5rNFnHgaJpZM4I10ms> .

[markselby9]

Seems like it's still not fixed in newest version?

[NazarK]

modified @sutherland007 #9 (comment)

to work with turbolinks (rails 5 in my case)

added to active_admin.js

active_admin_bootstrap_dropdown_fix = function() {

  $('.has_nested:not(.dropdown) > a').addClass('dropdown-toggle');
  $('.has_nested:not(.dropdown) > ul').addClass('dropdown-menu');
  $('.has_nested:not(.dropdown) > a').attr({
    "data-toggle" : "dropdown",
    "role" : "button",
    "aria-haspopup" : "true",
    "aria-expanded" : "false"
  });
  $('.has_nested:not(.dropdown) > a').append('<span class="caret"></span>');
  $('.has_nested:not(.dropdown)').addClass('dropdown');
}


$(document).on("turbolinks:load",active_admin_bootstrap_dropdown_fix)