DEV Community

@kon_yu
@kon_yu

Posted on

Using select2 in ActiveAdmin by using activeadmin_addons

Introduction.

When I upgraded from Rails 4.2 to 5.0->5.1, I also upgraded ActiveAdmin version.
It seems that activeadmin-select2, which uses select2 in ActiveAdmin, hasn't been maintained since April 2016, and
It did not work with the current ActiveAdmin 1.2 and Rails 5.1 combination.

So I decided to use activeadmin_addons, which can be handled separately by select2 in ActiveAdmin.

How to use select2 from activeadmin_addons and how to migrate from activeadmin-select2 to activeadmin_addons are described.

If you run select2 in ActiveAdmin, you can display completion like this

If you want to add a function other than the list of table elements, I recommend you to make a simple design administration screen using Twitter Bootstrap etc.

This version of the gem

  • activeadmin (1.2.0)
  • activeadmin_addons (1.1.1)

Modification of Gemfile



activeadmin # Stay tuned
activeadmin_addons # add
# activeadmin-select2 # delete


Enter fullscreen mode Exit fullscreen mode

Automatic generation of configuration files



bin/rails g activeadmin_addons:install


Enter fullscreen mode Exit fullscreen mode

config/initializers/activeadmin_addons.rb will be generated

select2 configuration

Note that the default will be select2.

For example, if the date is set to select2, it will take time to adjust the width.
This is quite a hassle if you want to use an asset written in an existing ActiveAdmin.



There are two ways to get around it, and the latter one requires less modification when migrating from activeadmin-select2.

Workaround 1: Set default-select in the class for without using select2.

I'll put it this way.



f.input :created_at, input_html: { class: "default-select" }


Enter fullscreen mode Exit fullscreen mode

【Recommended】Workaround 2: Set default-select in the class for without using select2.

In the configuration file of activeadmin_addons, the default method of select is select2, so you can make it default.
The select tag becomes a normal select tag.



ActiveadminAddons.setup do |config|
  config.default_select = "default"
end


Enter fullscreen mode Exit fullscreen mode

For that you want to express explicitly with select2, set select2 in the class.
This modification method is easy to migrate because it replaces only the part of activeadmin-select2 that was set to select2 explicitly.



# When filling in a form in the old activeadmin-select2 version of select2
f.input :created_at, as: :select2

# activeadmin_addons version
f.input :created_at, input_html: { class: "select2" }


Enter fullscreen mode Exit fullscreen mode

Reference: https://github.com/platanus/activeadmin_addons/blob/master/docs/select2_default.md

Top comments (1)

Collapse
 
ajit_dhanje_267025b09cfb7 profile image
Ajit Dhanje

I am using active admin addon gem, for select i have slim select

there this odd input alignment i want to avoid but nothing is working

tried to add
span.select2.select2-container{

width: calc(80% - 22px);
}

span.select2-selection {
border: 1px solid #c9d0d6;
}
In
app/assets/stylesheets/active_admin_custom.scss
Image description
app/assets/stylesheets/active_admin_custom.scss