class ActiveAdmin::Views::Columns
Columns
Component
¶ ↑
The Columns
component allows you draw content into scalable columns. All you need to do is define the number of columns and the component will take care of the rest.
Simple Columns
¶ ↑
To display columns, use the columns
method. Within the block, call the column
method to create a new column.
To create a two column layout:
columns do column do span "Column # 1 end column do span "Column # 2 end end
Multiple Span Columns
¶ ↑
To make a column span multiple, pass the :span option to the column method:
columns do column span: 2 do span "Column # 1 end column do span "Column # 2 end end
By default, each column spans 1 column. So the above layout would have 2 columns, the first being 2 time bigger than the second.
Max and Min Column
Sizes¶ ↑
Active Admin is a fluid width layout, which means that columns are all defined using percentages. Sometimes this can cause issues if you don’t want a column to shrink or expand past a certain point.
To overcome this, columns include a :max_width and :min_width option.
columns do column max_width: "200px", min_width: "100px" do span "Column # 1 end column do span "Column # 2 end end
Now the first column will not grow bigger than 200px and will not shrink smaller than 100px.
Public Instance Methods
Override add child to set widths
# File lib/active_admin/views/components/columns.rb, line 73 def add_child(*) super calculate_columns! end
For documentation, please take a look at Column#build
# File lib/active_admin/views/components/columns.rb, line 68 def column(*args, &block) insert_tag Column, *args, &block end
Protected Instance Methods
Calculate our columns sizes and margins
# File lib/active_admin/views/components/columns.rb, line 90 def calculate_columns! span_count = columns_span_count columns_count = children.size all_margins_width = margin_size * (span_count - 1) column_width = (100.00 - all_margins_width) / span_count columns.each_with_index do |column, i| is_last_column = i == (columns_count - 1) column.set_column_styles(column_width, margin_size, is_last_column) end end
Override the closing tag to include a clear
# File lib/active_admin/views/components/columns.rb, line 81 def closing_tag "<div style=\"clear:both;\"></div>" + super end
# File lib/active_admin/views/components/columns.rb, line 112 def columns children.select { |child| child.is_a?(Column) } end
# File lib/active_admin/views/components/columns.rb, line 103 def columns_span_count count = 0 columns.each do |column| count += column.span_size end count end
# File lib/active_admin/views/components/columns.rb, line 85 def margin_size 2 end