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

add_child(*) click to toggle source

Override add child to set widths

Calls superclass method
# File lib/active_admin/views/components/columns.rb, line 72
def add_child(*)
  super
  calculate_columns!
end
column(*args, &block) click to toggle source

For documentation, please take a look at Column#build

# File lib/active_admin/views/components/columns.rb, line 67
def column(*args, &block)
  insert_tag Column, *args, &block
end

Protected Instance Methods

calculate_columns!() click to toggle source

Calculate our columns sizes and margins

# File lib/active_admin/views/components/columns.rb, line 89
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
closing_tag() click to toggle source

Override the closing tag to include a clear

Calls superclass method
# File lib/active_admin/views/components/columns.rb, line 80
def closing_tag
  "<div style=\"clear:both;\"></div>" + super
end
columns() click to toggle source
# File lib/active_admin/views/components/columns.rb, line 111
def columns
  children.select { |child| child.is_a?(Column) }
end
columns_span_count() click to toggle source
# File lib/active_admin/views/components/columns.rb, line 102
def columns_span_count
  count = 0
  columns.each do |column|
    count += column.span_size
  end

  count
end
margin_size() click to toggle source
# File lib/active_admin/views/components/columns.rb, line 84
def margin_size
  2
end