Question

In the dashboards.rb file generated by ActiveAdmin 0.3.4, I added three sections consisting on wide tables with several columns. However ActiveAdmin displays each section next to the other, creating an unnecessary horizontal scrollbar.

How can I change this to a vertical layout?

dashboards.rb:

ActiveAdmin::Dashboards.build do
  section "Inactive users" do
    table do
      ...
    end
  end

  section "Deleted posts" do
    table do
      ...
    end
  end

  section "Latest comments" do
    table do
      ...
    end
  end
end

What I get:

I already tried using a div as the container for each table with no luck.

Answer 1

I finally fixed this with some CSS, in a new stylesheet:

active_admin_ex.css:

table.dashboard > tbody > tr > td {
  display:block;
}

Then, in config/initializers/active_admin.rb, I added:

config.register_stylesheet 'active_admin_ex.css'

And this fixed the display problem.