How to layout the dashboard sections vertically with ActiveAdmin?

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

This answer for active_admin >= 0.5.1

Dashboard is structured in columns and panels Columns are... well, columns, which define the horizontal layout. Panels are like sections that stack verticaly.

A 2 column, 3 sections en each column, would be defined by:

columns do
  column do
    panel "top on column 1"
      # some code
    end
    panel "second on column 1"
      # some code
    end
    panel "last on column 1"
      # some code
    end
  end
  column do
    panel "top on column 2"
      # some code
    end
    panel "second on column 2"
      # some code
    end
    panel "last on column 2"
      # some code
    end
  end
end

Answer 2

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.