CODEWITHSUNDEEP
ruby-on-railsactiveadmin
firedev
firedev

Reputation: 21088

How to put sidebar / filters on top of the ActiveAdmin index list

In Active Admin the sidebar is taking up too much space which interferes with data-dense tables.

Is there a simple way to move it on the top of the table?

Upvotes: 4

Views: 2178

Answers (2)

Labo Lado
Labo Lado

Reputation: 21

enter image description here

active_admin.js.coffee

$(document).ready ->
  $("#new_q ").appendTo '.table_tools'
  $('#new_q > div').each ->
    $('#new_q > div').replaceWith ->
      '<span>' + @innerHTML + '</span>'
     $(".sidebar").hide()
     $("#main_content").css("margin-right": "10px")
    return

  return

Upvotes: 1

firedev
firedev

Reputation: 21088

Here is how I did it, just add the following css:

#active_admin_content { display: flex; flex-direction: column }
#active_admin_content #sidebar { order: -1; margin: 0 -.5rem; display: flex; width: auto; }
#active_admin_content #sidebar > div { width: auto; margin: 0 .5rem; flex: 1 1 100%;}
#active_admin_content #sidebar > div:first-child { flex:  0 0 auto }
#active_admin_content #main_content_wrapper #main_content { margin: 0 }
.table_tools { margin: 1rem 0; }

And enjoy:

enter image description here

Upvotes: 5

Related Questions