Class: ActiveAdmin::Views::Columns

Inherits:
Component
  • Object
show all
Defined in:
lib/active_admin/views/components/columns.rb

Overview

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.

Instance Method Summary collapse

Instance Method Details

#add_child ⇒ Object

Override add child to set widths



72
73
74
75
 
# File 'lib/active_admin/views/components/columns.rb', line 72

def add_child(*)
  super
  calculate_columns!
end

#calculate_columns! ⇒ Object (protected)

Calculate our columns sizes and margins



89
90
91
92
93
94
95
96
97
98
99
100
 
# 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 ⇒ Object (protected)

Override the closing tag to include a clear



80
81
82
 
# File 'lib/active_admin/views/components/columns.rb', line 80

def closing_tag
  "<div style=\"clear:both;\"></div>" + super
end

#column(*args, &block) ⇒ Object

For documentation, please take a look at Column#build



67
68
69
 
# File 'lib/active_admin/views/components/columns.rb', line 67

def column(*args, &block)
  insert_tag Column, *args, &block
end

#columns ⇒ Object (protected) 



111
112
113
 
# File 'lib/active_admin/views/components/columns.rb', line 111

def columns
  children.select { |child| child.is_a?(Column) }
end

#columns_span_count ⇒ Object (protected) 



102
103
104
105
106
107
108
109
 
# 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 ⇒ Object (protected) 



84
85
86
 
# File 'lib/active_admin/views/components/columns.rb', line 84

def margin_size
  2
end