I am working with an app with Active Admin and needed to select multiple values from a select input, I have added the Select2 gem which adds all the relevant the JS and CSS with no issues but for some reason the select boxes seem to change their appearance slightly but not to the ful Select2 appearance, upon inspection the JS doesn't look like its added all the correct classes...... any ideas?
Here is my code:
active_admin.css.scss
//= require select2
#import "active_admin/mixins";
#import "active_admin/base";
active_admin.js
//= require select2
//= require active_admin/base
$(".select2able").select2({
placeholder: "Select a Partner"
});
activeadmin form
f.input :sponsors, as: :select, collection: Sponsor.all, input_html: {class: 'select2able'}
This is caused by Active Admin's decision to wrap its CSS styles inside .active_admin selector. As a result, most of third-party gem's CSS styles become less specific, and their appearance become broken.
For select2, and all gems whose CSS files are inside "stylesheets" folder, add the following lines at the bottom of active_admin.css.scss:
body.active_admin {
#import "select2";
}
This will give all of select2's styles body.active_admin selector, making them more specific than Active Admin's styles.
Problem solved, use chosen js instead of select2, works equally as well as select2 but without the issues in active admin.
https://github.com/gregbell/active_admin/issues/2267#issuecomment-19197807
Related
I have a single-page vue 2 app made with the cli-tool. Most of my routes use Bootswatch (Bootstrap) styling. But one shouldn't at all. This is only a problem because the Bootstrap affects the body and html styles and generally messes with the other styling. The route shouldn't use Bootstrap gets affected even when I #import the Bootstrap in a scoped <style> only to the routes that should use it. This happends if I first visit the Bootsrap routes and then to the isolated one. How should I go about doing this so that one of my routes is completely isolated when it comes to styling? If it's impossible or very impractical, suggest other ways of doing this. If this weren't a single-page-app this would be easy. But I'd prefer it be one.
I succeeded in encapsulating bootstrap import within a class called 'bootstrap-inside' and assigning it to the #app (Index route for example) div that is supposed to be styled with Bootstrap.
.bootstrap-inside {
#import '~bootstrap/scss/bootstrap.scss';
}
From now on, if you want to use bootstrap, you just have to use .bootstrap-inside in your component/view/layout.
I would suggest creating a view layout for your no-bootstrap pages and set your route to extends that layout (i can give you the solution for this too if you want).
I can mention this answer of another thread about limiting the scope of bootstrap styling in case you go through unexpected bootstrap behavior.
The easiest solution I know for this is to manually reset every css property for a given selector.
You could add an id / class to the root element of your page, and explicitly reset all css properties for all its childs. It would override the default bootstrap styles, but not remplacing its classes though.
Here's a class that would reset every css property: reset css for a div #15901030
It's not super convenient but it should work!
I'm building a google-style text box that auto-completes typed text.
Using typeahead with typeahead.js-bootstrap.css:
$(document).ready(function() {
$('#op1').typeahead({
remote: '/search/%QUERY',
});
});
<input type="text" id="op1">
it worked but there are two problems:
I could not customize it. Whenever I make any significant style changes, or use bootstrap's form-control class for input element: the text box gets completely messed up.
The auto-completed ("hint") text was written above the typed text so I whatever color I set for the hint was the color of the entire text! I tried giving the hint a negative z-order but then it was not displayed at all.
I've tried Typeahead AND Select2 auto-completion libraries with my Bootstrap 3 template, and so far the only thing I was able to work out-of-the-box without completely ruining the layout was the above code
If anyone can solve these problems, or otherwise recommend a full CSS + JS typeahead solution for Bootstrap3, I'd be grateful :)
It gives you completely easy way to customise the look with formatresults. You can even write full html view for your results. and to customise the look of input box apply a class to the wrapper for your search box and override select2 rendered css(load the page and check from browser that from where that style is coming).
http://ivaynberg.github.io/select2/
I made a full featured customised search with this.
There is now a fork available for select2 that supports Bootstrap 3.
http://fk.github.io/select2-bootstrap-css/
https://github.com/fk/select2-bootstrap-css#readme
I'm using rails_admin and I'd like to add a few custom styles to my admin section on some inputs. Is there any way to specify additional classes?
Something like:
configure :title, :string do
css_class 'my-class'
input_html {:class => 'my-class', :toolbar => 'my-toolbar'}
end
I can't seem to find a comprehensive list of what options are available. I know I can specify hidden, visible, ckeditor true, and one or two other things.
I'm using some additional custom JS and CSS, but I need to be able to specify some CSS classes to make everything work the way I want.
Specifically, I'm using CKEditor, and would like to use multiple toolbars, one simple and one advanced. I've been able to config CKEditor fine, but I can't find a way to have Rails_admin use an alternate toolbar.
You can use :html_attributes
https://github.com/sferik/rails_admin/blob/master/lib/rails_admin/config/fields/base.rb#L126
There is also css_class. So you could have something like:
field :your_field do
css_class do
# Be sure to not remove the original class
# set by #{self.name}_field
"#{self.name}_field your_custom_class"
end
end
I'm running Rails3 with twitter-bootstrap-rails. I have 2 different layouts "application.html.erb" and "backend.html.erb". Unfortunately, when using the backend layout I still get all the bootstrap_and_overrides.css.less styles overriding the defaults. I would like to only use a separate overrides file so the layout is different than my application layout.
Any suggestion on how best to do this?
The only way I can think to do this is to not require the override file in my application.css file (as suggested in the bootstrap readme) and instead require it in a CSS file that I only load in the application.html.erb file.
I didn't see that the application layout actually specified the application.css file. I modified that line to read:
<%= stylesheet_link_tag "backend", :media => "all" %>
And then created a backend.css file that did not reference the entire tree nor the original overrides file.
Now I have a generic layout that can be customized through the backend.css or my new bootstrap_and_overrides_backend.css.less file.
Where exactly do you add jquery code to rails 3.1.3? New to rails and I want to use masonry.js /http://masonry.desandro.com/ to my rails app.
I added jquery.masonry.min.js to app/assets/javascript and put //= require jquery.masonry.min in application.js but not sure where to put the masonry javascript code below. I thought it would go in the application.js but there is a comment that says it's not recommended to put code there. Any help?
$(function(){
$('#container').masonry({
// options
itemSelector : '.item',
columnWidth : 240
});
});
Rails is just trying to encourage you to keep your javascript organized, so that the main javascript file doesn't get massive and messy. You can put it in application.js while you are playing around and then move it to a page-specific javascript file later if you want, it won't actually hurt anything.
Rails will automatically make you an empty javascript file for each model, so if know you'll be using this in a model called posts, you would put it in app/assets/javacsripts/posts.js.
More on how the asset pipeline works here.