I am following allong the integration of selectize in an existing rails 6 app, following the guide in: https://gorails.com/episodes/select-or-create-with-selectize-js
Does not work with rails 6, after finding someone sugestion to integrate on https://gorails.com/forum/how-do-i-use-selectize-in-rails-6 i got stuck in "selectize is not a function"
Anyone who could point some directions?
Thanks in advance.
Add selectize to your packages:
yarn add selectize
Add this line to your javascript/packs/application.js
require("selectize")
Add the code necessary to initialize the jQuery plugin (you could also add this to your application.js file if you wanted to):
$(document).on("turbolinks:load", function() {
$(".selectize").selectize()
})
Make sure your <select> has the matching selectize class that you just defined.
To import the selectize styles, add these lines to your webpack stylesheet:
#import "~selectize/dist/css/selectize";
#import "~selectize/dist/css/selectize.default";
Related
I am very new to Angular and currently I am trying to add styling to an existing project.
The project has been constructed using components. So for each page there are 4 files,
mypage.component.css
mypage.component.html
mypage.component.spec.ts
mypage.component.ts
I can easily style the page by adding the styles to the css file in the component and the page style works perfectly.
However the issue is there are many pages that require the same styles again and again.
I can copy and paste the same styles to each css file and it works.
But this is not the most elegant or efficient way to do this.
I want to know what the correct way to add a global.css file so that it can be accessed by each page. So that way the css is only written once.
I have googled but haven't found anything that explains how to do it in simple ways.
Thanks
Angular adds the style.css/scss file by default to your project once you created it using the ng new command, and include it within the angular.json config file to be available across the components of the project.
So you can add any global styles within src/styles.css(or scss) file, to be implemented everywhere.
you can add your generic css into style.css/style.scss.
I am building a Liferay Angular portlet that uses angular material inputs and some inputs are not rendering well at all. I am guessing that some CSS/JS is missing, but I can not figure it out what exactly.
My styling css file looks like this:
#import "~#angular/material/prebuilt-themes/deeppurple-amber";
Also, when I inspect with Developer tools, I see the following warning:
Could not find Angular Material core theme. Most Material components may not work as expected.
I have also tried referencing the css file from the AppComponent with styleUrls: ["/o/<my-portlet_name>/lib/app/styling.css"], but without any luck.
So, my question is - How to reference a CSS file within an Angular Portlet in Liferay ?
I have read over and over again this article and finally I made the following changes:
changed the styling.css file into styling.scss
changed its content to #import "../../../../../node_modules/#angular/material/prebuilt-themes/deeppurple-amber"; - I am not sure why are necessary 5 of ../, I was expecting that by using ~ to know where node_modules folder is
added the following line in the property attribute of the #Component annotation in my Portlet: "com.liferay.portlet.header-portlet-css=/lib/app/styling.css" - yes, the extension is .css and not .scss
I decided to upgrade the new app I am developing to the Meteor 1.3 release. I followed 'The Official Guide' instructions from MDG for the recommended directory layout and, with a bit of refactoring of my FlowRouter code, was able to get the app almost working. The problem seems to be with the Semantic UI package (2.1.8) installed from Atmosphere. I did need to add the appropriate SUI *.less files to a top-level 'main.less' file in the 'client' directory to get the app to render a properly styled view. However, the SUI behaviors which worked nicely in Meteor 1.2 yesterday no longer work.
My assumption is that I need to import the SUI behaviors using the form...
import something from 'meteor/semantic:ui';
...but I haven't been able to identify the correct import statement. Semantic UI doesn't present a typical namespace for its library so none of the obvious ideas worked.
Has anybody been able to get SUI working with 1.3 just using standard Blaze templates?
Maybe one of the following points may help, or give a hint for further inquiry:
Make sure the hole Semantic UI folder is at /client/lib/semantic-ui (no need to import anything elsewhere, just use the css classes).
Make sure the Atmosphere packages semantic:ui and flemay:less-autoprefixer are installed. So all .less files within the Semantic UI folder will be converted automatically.
If you need the JavaScript functionality of Semantic UI "Modules", like dropdowns, you need to initiate the functionality on page load. For example with $(".ui.dropdown").dropdown("initialize") or "refresh". Here you find some description of these so called "module behaviors". Behaviors are defined by $('.your.element').module('behavior name', argumentOne, argumentTwo).
If you are using a theme other than default, you might try setting the theme for the module you are trying to use to default in theme.config.less.import. It should look something like this:
/* Modules */
#accordion : 'material';
...
#dropdown : 'default';
....
I use the following code to load YUI modules.
YUI().use('tabview', 'datatable', 'datasource-local', 'node', 'node-load', function(Y)
{
......
});
This would load the modules and ALL of the respective CSS files.
But I want to use the CSS selectively. Let's say I don't want to load CSS for TabView.
How can I achieve that?
I tried the following -
YUI({ fetchCSS: false }).use('tabview', 'datatable', 'datasource-local', 'node', 'node-load', function (Y)
{
......
});
Its obvious that the above code would not load CSS files for any module.
How can I disable CSS for tabview so that I can use my own?
There is 'override' property in the skin config. That allows you to use differents skin for some modules.
You may create a skin with your own css file, and tell the loader to use this skin for the module you want (tabview in your example).
I'm not sure you can have different source folder for the differents skins though.
http://yuilibrary.com/yui/docs/api/classes/config.html#property_skin
You can also try to define a css module and 'use' it.
http://yuilibrary.com/yui/docs/api/classes/config.html#property_modules
I hope it helps you!
I see that the jquery UI distribution contains 15 css files. The jquery.ui.all.css file contains two #import statements -- one for jquery.ui.base.css and another for jquery.ui.theme.css.
The jquery.ui.base.css itself contains 11 import statements for jquery.ui.core.css and then each of the widgets.
I also see a single (larger than others in the folder) file called jquery-ui.css.
Am I off in thinking that if I want all the CSS for a given theme then linking the single jquery-ui.css works but if I want to customize the pieces that I download then importing jquery.ui.all.css and customizing jquery.ui.base.css is the way to go?
Am I not understanding something?
You should use the jquery-ui.css. If you don't need certain widgets, you can uncheck them when making your (custom) jQuery UI and they won't be included.