如何使用 ActiveAdmin 垂直布局仪表板部分?
在 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 作为每个表的容器,但没有成功。
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.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

发布评论
评论(5)
鹊巢2025-01-14 11:17:42
更灵活的是,您可以覆盖 Dashboard 类的 render_sections 以使用 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
您可以在 app/admin/dashboard.rb
文件的开头添加此代码,然后添加 :colspan声明节时的
选项:
section "All time summary" , colspan: 6 , priority: 2 do
div do
render 'all_time_summary'
end
end
烟花肆意2025-01-14 11:17:42
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
~没有更多了~
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
active_admin >= 0.5.1
仪表板的此答案由列和面板组成
列是......好吧,列,它定义了水平布局。
面板就像垂直堆叠的部分。
2 列,每列 3 个部分,定义如下:
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: