When I add the matcher in the select2, the bootstrap theme is gone. However, when I delete the matcher, the bootstrap theme reappears in the website. Is there a way to add the bootstrap theme and the matcher together?
$('.gas_a').select2({
matcher: matchStart(params, data),
theme: "bootstrap"
});
Related
How can I completely disable jquery mobile styling for certain container?
I am using data-enhance="false" for container along with javascript code:
$(document).bind("mobileinit", function() {
$.mobile.ignoreContentEnabled = true;
});
Yet some jquery mobile styling remains, for example link color:
.ui-page-theme-a a{
color: #38C;
font-weight: 700;}
I had to overwrite these css rules manually, it is pretty cumbersome.
if you have less CSS to overwrite, then overwriting same classes in our css with !important is best way.
If you are overwriting many classes then don't include jQuery mobile theme CSS just use jQuery mobile structure CSS as its requires for some functionalities such as transition and all.
One more option modify Jquery theme CSS as requires means remove unwanted class as jquery mobile is open source you are good on this.
Any tip on how to set conditional style of angular bootstrap directive accordion-heading without doing changes in original .js? Adding ng-style or ng-class does not have any effect.
NOTE: I want to avoid setting styling on the div within accordion-heading.
I solved my case by setting ng-class on accordion-group directive, which applied conditional styling for each heading.
I also realized that angular bootstrap templates can be customized easily. Follow these links:
https://github.com/angular-ui/bootstrap#customize-templates
Can you override specific templates in AngularUI Bootstrap?
http://codepen.io/p0123n/pen/lvzbx
I am building an application using jquery mobile and phone gap. As I am about to start the application, have a doubt on how to change the theme of an application on the fly or with minimum changes involved so that I can use the same app with different themes for different client.
Please let me know is there a configuration or common place available to update/change the theme of an entire application at any moment during the development.
EDIT: sorry to confuse a bit, the question is with how to switch between the themes provided by default by jquery mobile like a, b, c, d and e without doing any or much code change.
Thanks.
jQuery Mobile has 3 different CSS files, you can get them when you download whole package.
jQuery Mobile CSS file
jQuery Mobile Structure CSS file
jQuery Mobile Theme CSS file
If you want to use different themes all you need to do is use second and third mentioned file. Structure CSS holds jQuery Mobile structure CSS and it is a backbone of whole structure. What you need to change is jQuery Mobile theme CSS file. This is a file you get when you create a new theme.
On the other hand jQuery Mobile will have several more CSS files but logic is the same. If you download jQuery Mobile from this link: http://jquerymobile.com/
You will find these files:
jquery.mobile.external-png-1.4.2.min.css
jquery.mobile.icons-1.4.2.min.css
jquery.mobile.inline-png-1.4.2.min.css
jquery.mobile.inline-svg-1.4.2.min.css
jquery.mobile.structure-1.4.2.min.css
jquery.mobile.theme-1.4.2.min.css
jquery.mobile-1.4.2.min.css
If you want to use customized themes you will need to remove jquery.mobile-1.4.2.min.css and jquery.mobile.theme-1.4.2.min.css. Theme builder will give you new jquery.mobile.theme-1.4.2.min.css file, or even if you download it from somewhere you will get alternative jquery.mobile.theme-1.4.2.min.css file.
Update
Working example: http://jsfiddle.net/Gajotres/LfLFm/
JavaScript:
$(document).on('pagebeforecreate', '#index',function (e, ui) {
$(this).removeClass('ui-page-theme-a').addClass('ui-page-theme-b');
});
or even better: http://jsfiddle.net/Gajotres/ML2F6/
$(document).on('pagebeforecreate', '#index',function (e, ui) {
$(this).page({theme:'b'});
});
You can simply do it through .page({ theme : "a, b, c" }) widget. It will change the whole page's theme.
$(document).on("pagecreate", function () {
$(".selector").on("click", function () {
$.mobile.pageContainer.pagecontainer("getActivePage").page({
theme: "b"
});
});
});
Demo
I want to implement this http://www.eyecon.ro/colorpicker/#about or any other color picker in one of the Active Admin form.
Any help is appreaciated.
Thanks,
GS
Because you want to use a "raw" library, it will be a little more complicated to do, you should rename the paths of the images that library are using, javascripts and so on... so i will recommend you to use another colorpicker with rails-integration, it will be a lot easier, check this one for example jQuery colorpicker for Rails, to use this follow this steps
first your gemfile
gem 'jquery-minicolors-rails'
second add requiere for js to active_admin and load the minicolors() function
active_admin.js
//= require active_admin/base
//= require jquery
//= require jquery.minicolors
jQuery( function($) {
$(".colorpicker").minicolors()
});
third add the css to the top of the sass active admin
active_admin.css.scss
/*
*= require jquery.minicolors
*/
// SASS variable overrides must be declared before loading up Active Admin's styles.
//
// To view the variables that Active Admin provides, take a look at
// `app/assets/stylesheets/active_admin/mixins/_variables.css.scss` in the
// Active Admin source.
//
// For example, to change the sidebar width:
// $sidebar-width: 242px;
// Active Admin's got SASS!
#import "active_admin/mixins";
#import "active_admin/base";
// Overriding any non-variable SASS must be done after the fact.
// For example, to change the default status-tag color:
//
// .status_tag { background: #6090DB; }
and finally in your form something like this
f.input :name, input_html: { class: 'colorpicker' }
you can see that i use the class colopicker to identify the input with the jquery function
you can apply more css to this, but this was enough for me and was the easiest way, regards!
The quickest way to get that working is simply add a class to your input using the input_html options.
f.input :color, input_html: { class: 'colorpicker' }
And then in active_admin.js.coffee, add in the code to turn .colorpicker input fields into color pickers.
If you are going to be making a lot of them, or adding options to them, it might be worth it to make a custom Formtastic input that adds those classes and merges the options that can get picked up by the colorpicker library.
You can use html5 color input. Here is an example:
f.input :color, as: :color
I'm using rails 4.2.0 and ruby 2.2.1 and it works fine for me.
I really like rails_admin, but my clients don't like CKEditor. Is this really the only option for WYSIWYG on this gem? Is there any way to use tinyMCE with rails_admin?
after struggling to get CKEditor working properly in RailsAdmin (on Rails 3.1), I used tinymce:
It works well and is done in minutes:
in your gemfile add:
gem 'tinymce-rails'
plus you inlcude a line in rails_admin.js.erb:
require_asset 'tinymce-jquery'
you may need to copy the whole file (rails_admin.js.erb) from the gem to /assets/javascripts/rails_admin/
before you do this.
finally, you will also need to add some jquery to the view files
app/views/rails_admin/main/edit.html.haml and app/views/rails_admin/main/new.html.haml
:javascript
jQuery(function() {
jQuery('textarea').tinymce({
theme: 'advanced'
});
});
This will add the Wysiwyg to all text area fields.
WYSIWYG editors typically just overlay an HTML text area element with JavaScript functionality. So any editor should work in theory. You could replace the references in the code to tinyMCE, make sure you have all the files properly installed and then set tinyMCE to use the ID of the text area control.
It should not make a difference to the back-end programming which client side interface is used to create HTML in the text area.
Great andistuder,
I propose a modified version of your solution.
Copy the rails_admin.js.erb from the gem to the /assets/javascripts/rails_admin/ in your project path.
Add the following line:
...
require_asset 'tinymce-jquery'
%>
jQuery(function() {
jQuery('textarea').tinymce({
theme: 'advanced'
});
});
And all will works like a charm!
I achieved this in a slightly different way, which worked for:
rails_admin (0.8.1)
tinymce-rails (4.4.1)
Implementation:
Gemfile
gem 'tinymce-rails'
app/assets/javascripts/rails_admin/custom/ui.js
//= require tinymce-jquery
var admin = {
initTinyMce: function() { tinyMCE.init({ selector: "textarea[name$='_html]'" }) }
}
$(function() {
admin.initTinyMce();
$(document).on('rails_admin.dom_ready', function() {
admin.initTinyMce();
});
});
Explanation
https://github.com/sferik/rails_admin/wiki/Theming-and-customization
Suggests the ui.js location
Suggests to use rails_admin.dom_ready
https://github.com/spohlenz/tinymce-rails
//= require tinymce-jquery: no ruby interpolation required and I like using manifest files
Custom:
I needed to run the initialization twice, all seems good so far
The selector textarea[name$='_html]' will convert all text areas where the field ends in _html, that's what I store, that's how I name my fields