如何使用ActiveAdmin垂直佈局儀表板部分？

Question

在由ActiveAdmin 0.3.4生成的dashboards.rb文件中，我添加了三個由寬列表組成的列。但是，ActiveAdmin會將每個部分顯示在另一個旁邊，從而創建一個不必要的水平滾動條。

如何將其更改爲垂直佈局？

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 

我能得到什麼：

我使用一個div作爲沒有運氣每個表的容器已經嘗試過。

Answer 1

我終於有一些CSS固定這一點，在新的樣式表：

active_admin_ex.css：

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

然後，在配置/初始化/ active_admin.rb，我添加：

config.register_stylesheet 'active_admin_ex.css' 

而這種固定的顯示問題。

Answer 2

你必須使用CSS來防止

div :class => 'some class name' do 

end 

風格類

Answer 3

更加靈活，可以覆蓋儀表板類的render_sections使用合併單元格：

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 

，你可以在你開始app/admin/dashboard.rb文件中添加以下代碼，然後聲明節時添加:colspan選項：

section "All time summary" , colspan: 6 , priority: 2 do 
    div do 
     render 'all_time_summary' 
    end 
    end 

Answer 4

此答案active_admin> = 0.5.1

控制板以列和麪板結構 列是...好的列，它定義了水平佈局。 面板就像堆疊垂直的部分。

A 2列3節EN每一列，將被定義爲：

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 5

columns do 
     column do 
     panel "Recent Created Restaurant" do 
      table_for Restaurant.order('id desc').limit(5).each do |restaurant| 
      column (:id) {|restaurant| link_to(restaurant.id, admin_restaurant_path(restaurant)) } 
      column :name 
      column :phone    
      column :updated_at 
      end # table 
     end # panel 
     end # column 


    column do 
    panel "Recent Created Menu" do 
     table_for Menu.order('id desc').limit(5).each do |menu| 
     column (:id) {|menu| link_to(menu.id, admin_menu_path(menu)) } 
     column :name 
     column "Restaurant Name" do |menu| 
      menu.restaurant.name 
     end 
     column :updated_at 
     end # table 
    end # panel 
    end # column 

    column do 
    panel "Recent Created Order" do 
     table_for Order.order('id desc').limit(5).each do |order| 
     column (:id) {|order| link_to(order.id, admin_order_path(order)) } 
     column :table 
     column :status 
     column "Item Name" do |order| 
      order.item_orders.id 
     end 
     column :updated_at 
     end # table 
    end # panel 
    end # column 




end # columns