vinhnglx / active_bootstrap_skin

Bootstrap skin for Active Admin :rocket: :rocket: :rocket:
MIT License
134 stars 28 forks source link

Dropdowns not working #9

Open sutherland007 opened 8 years ago

sutherland007 commented 8 years ago

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

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: git1

Into this: git2

Hope it helps to you in a newer version.

vinhnglx commented 8 years ago

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

sutherland007 commented 8 years ago

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

Revinand commented 8 years ago

There is no this fix in the repo...

vinhnglx commented 8 years ago

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

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

Jamevidi commented 7 years ago

same here, not working Active Admin 1.0.0 and latest active_bootstrap_skin

Jamevidi commented 7 years ago

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

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($('')); }); $('.dropdown_menu > button').addClass('btn btn-default dropdown-toggle'); $('.dropdown_menu > button').attr( "data-toggle", "dropdown"); $('.dropdown_menu_list').addClass('dropdown-menu');

jaxn commented 7 years ago

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

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

jaxn commented 7 years ago

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 notifications@github.com 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 https://github.com/vinhnglx/active_bootstrap_skin/issues/9#issuecomment-269718028, or mute the thread https://github.com/notifications/unsubscribe-auth/AABxp3rsSgFPgms0ZlFHFLMJc0rx1zLkks5rNFnHgaJpZM4I10ms .

markselby9 commented 6 years ago

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

NazarK commented 6 years ago

modified @sutherland007 https://github.com/vinhnglx/active_bootstrap_skin/issues/9#issuecomment-226324082

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)