Ruby on rails 如何使用ActiveAdmin垂直布局仪表板部分？

在0.3.4生成的

dashboards.rb

文件中，我添加了三个部分，这些部分包含多个列的宽表。但是，ActiveAdmin会将每个部分显示在另一个部分旁边，从而创建一个不必要的水平滚动条

如何将其更改为垂直布局

仪表盘。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

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

我得到的：

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

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

---

我已经尝试过使用div作为每个表的容器，但没有成功。

您必须使用CSS来防止这种情况

div :class => 'some class name' do

end

---

设置该类的样式

我终于用一些CSS在一个新的样式表中解决了这个问题：

活动的\u管理\u例如css:

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

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

然后，在config/initializers/active_admin.rb中，我添加了：

config.register_stylesheet 'active_admin_ex.css'

---

这解决了显示问题。

更灵活的是，您可以覆盖Dashboard类的render_部分以使用colspan：

module ActiveAdmin
  module Views
    module Pages
      class Dashboard < Base

        protected

        def render_sections(sections)
          cloned_sections = sections.clone
          table :class => "dashboard" do

            while !cloned_sections.empty?
              current_cols_number = 0
              tr do
                while current_cols_number < 12 && !cloned_sections.empty?
                  s       = cloned_sections.shift
                  colspan = s.options[:colspan].nil? ? 4 : s.options[:colspan]
                  td colspan: colspan do
                    render_section(s)
                  end
                  current_cols_number += colspan
                end
              end
            end

          end
        end

      end
    end
  end
end

---

此答案适用于active_admin>=0.5.1

仪表板由列和面板构成 列是。。。嗯，列，它定义了水平布局。 面板就像垂直堆叠的部分

一个2列，每列3节，将由以下内容定义：

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

---

实际上，每个部分都在一个表中，所以我需要比预期更多的CSS（请参阅我的答案）。无论如何，感谢CSS的想法：）惊人的解决方案，我认为这是最好的方法。干得好！请你能扩展你的代码，它在做什么，为什么它会为用户工作？一般代码在没有上下文的情况下转储，并且经常被拒绝