platanus / activeadmin_addons

Extends ActiveAdmin to enable a set of great optional UX improving add-ons
MIT License
763 stars 288 forks source link

[BUG] Select UI styling lost when using `activeadmin` `3.2.0` #490

Open Aurea-Li opened 11 months ago

Aurea-Li commented 11 months ago

Describe the bug The current activeadmin_addons gem I'm using is the latest stable, 1.10.1. After upgrading activeadmin from 2.12.0 to 3.2.0, I noticed that all select boxes lost their styling. If I downgrade activeadmin back to 2.12.0 and keep activeadmin_addons gem at 1.10.1, the select styling shows up again.

To Reproduce Steps to reproduce the behavior:

  1. Install version 3.2.0 of activeadmin, and version 1.10.1 of activeadmin_addons.
  2. Spin up an instance of admin.

Expected behavior image

Screenshots image

Additional context Here are the imports from my active_admin.scss file.

@import 'active_admin_custom/mixins/variables';
@import 'active_admin/mixins';
@import 'active_admin_custom/mixins';
@import 'active_admin/base';
@import 'active_admin_custom/base';
@import 'activeadmin_addons/all';
@import 'activeadmin/quill_editor/quill.snow';
@import 'activeadmin/quill_editor_input';
@import 'tooltip/base';
@import 'c3';
@import 'jsoneditor';

Here are the imports from my active_admin.js file.

//= require active_admin/base
//= require activeadmin_addons/all
//= require activeadmin/quill_editor_input
//= require activeadmin/quill_editor/quill
//= require activestorage
//= require c3
//= require d3
//= require jsoneditor

//= require ./copy_to_clipboard_helpers
//= require ./jsoneditor_helpers
//= require ./organization

I don't have anything set in ActiveadminAddons.setup do |config|, and I'm not running config.register_stylesheet anywhere in ActiveAdmin.setup do |config|.

haaayden commented 10 months ago

I'm using activeadmin 3.2.0 without activeadmin_addons and I'm also experiencing this issue, makes me think it isn't activeadmin_addons related.

Using this reference, I added the following to active_admin.scss and it made things look much more consistent for me:

form select {
  border: $border-width solid #c9d0d6;
  @include rounded;
  font-size: 0.95em;
  @include sans-family;
  outline: none;
  padding: 7px $text-input-horizontal-padding 6px;

  &:focus {
    border: $border-width solid #99a2aa;
    @include shadow(0,0,4px,#99a2aa);
  }
}

Hope that helps @Aurea-Li