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 createa a two column layout:

colums 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:

colums 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 Mix 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.

colums 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



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

def add_child(*)
  super
  calculate_columns!
end

#calculate_columns! ⇒ Object (protected)

Calculate our columns sizes and margins



90
91
92
93
94
95
96
97
98
99
100
101
 
# 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

  children.each_with_index do |col, i|
    is_last_column = i == (columns_count - 1)
    col.set_column_styles(column_width, margin_size, is_last_column)
  end
end

#closing_tag ⇒ Object (protected)

Override the closing tag to include a clear



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

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

#column(*args, &block) ⇒ Object

For documentation, please take a look at Column#build



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

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

#columns_span_count ⇒ Object (protected) 



103
104
105
106
107
108
 
# File 'lib/active_admin/views/components/columns.rb', line 103

def columns_span_count
  count = 0
  children.each {|column| count += column.span_size }

  count
end

#margin_size ⇒ Object (protected) 



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

def margin_size
  2
end