I want to use both the vuetify.min.css folder and bootstratp.min.css folder. Bootstrap is defined on the layout page and I need vuetify.min.css on another page. Is there any way to use both of them together?
There are multiple solutions here:
Prefix one of the libraries like so:
https://github.com/vuetifyjs/vuetify/issues/9454
Only get what you need from the BS4 library (using SCSS) like so:
#import "~bootstrap/scss/buttons.scss";
Switch to BS3 for your button styling and create a custom package.
In my opinion the best solution is the second, get it working in your setup and build the files you need. More info on Theming BS4 here.
Related
I am trying to find an answer several days but not able to.
How can I add custom styles just like in Ckeditor 4 (For example, using CKEDITOR.stylesSet.add) ?
Thanks
Edit the CkEditor css file in its entirety, that can be found at This guide
From the page:
By default, content styles are loaded by the editor JavaScript which makes them only present
when users edit their content and this, in turn, usually takes place in the back–end of an application. If you want to use the same styles in the front–end, you may find yourself in a situation that requires you to load CKEditor just for that purpose, which is (performance–wise) not the best idea.
To avoid unnecessary dependencies in your front–end, use a stylesheet with a complete list of CKEditor 5 content styles used by all editor features. There are two ways to obtain it:
By taking it directly from this guide and saving it as a static resource in your application (e.g. content-styles.css) (recommended).
By generating it using a dedicated script. Learn more in the Development environment guide.
Load the content-styles.css file in your application by adding the following code to the template:
I'm making a website using Vue, and have added localization using vue-i18n, however there are some svg-images that also need to change with localization.
Is it possible to add the filename to the localization file like this:
"image" : "EnglishImage.svg"
or
"image" : "../assets/images/price/EnglishImage.svg"
And in the Vue something like: <img :src="$t('image')">
And have it change when the localization is changed?
As a quick temporary fix I used the following steps:
Place the images normally into the page
Run project
Use inspect to find the path for them. (it was something like "../img/EnglishImage.c9bc8f65.svg"
Add these paths to the Localization files
Not the best solution, but for now it works
In learning the awesome Aurelia framework, I have learnt that you can use the following composition techniques however I am not sure what would be the difference.
<compose view="./nav-bar.html"></compose>
or
<require from="./nav-bar.html"></require>
Any clarification is appreciated.
<require> imports resources that you want to use in the view. It's conceptually similar to a require() JavaScript call in AMD or CommonJS module code (or an import statement in ES6 code). You would use <require> to import a custom element or custom attribute that you wanted to use in your view. You'll still need to explicitly render it like <nav-bar></nav-bar>.
<compose> renders the specified view.
We will use already created templates in our app and we need to use in the current app via require.
you can use css and javscript files also in require.
But from compose you can render your views by giving your view modal name.
You can see this link to have a better idea about compose.
http://patrickwalters.net/best-parts-of-aurelia-1-composing-custom-elements-templates/
When using filter and pagination plugins for EnhancedGrid, the HTML templates for the same are loaded from dojox\grid\enhanced\templates.
Is there any way by which I can avoid the server requests for these HTML files by making them part of the Enhanced Grid's inline javascript?
You should make a custom dojo build that creates one js file as a result. follow this instructions from a previous QA:
How to build Dojo into a single file, given a list of dependencies?
EDIT:
The build should add those html files inline, but doesn't. I googled a bit and found this link related to your problem:
http://grokbase.com/t/dojo/dojo-interest/121e536t64/enhancedgrid-filter-problem
It suggests a fix using this link
http://dojo-toolkit.33424.n3.nabble.com/Custom-build-including-CSS-and-HTML-files-td3536573.html
Citation:
If you are using the AMD style of module definition, then you can specify a text dependency like so:
define(["dojo/text!some/file.html", "other/module"],
function(template, otherModule){
...
// to use the contents of the html file, treat template as if it were a normal string
someNode.innerHTML = template;
...
});
The build system should automatically convert the text dependency to an inline string literal. Most Dojo files are already formatted to use this feature, but I can't account for dojox modules. I'm not sure whether similar functionality is possible with the dojo.require/dojo.provide system of dependency declaration.
I have got the solution. Those struglling from this issue pls. note that there is bug with Dojo 1.7.1 and we need to use Dojo 1.8.3 and use internStrings option with the build command. You should see HTML files being interned in the build-report.
Hi I have tried every ways and means to load dojo page into ContentPane.
It seems That I am not able to do that. Correct me if I am wrong.
Looks like the only solution is through the creation and destroy of any widget while running
Clement
The dojo docs for dojox/layout/ContentPane (which allows references to script files) mentions your issue:
NOTE that dojo.require in script in the fetched file isn't recommended Many widgets need to be required at page load to work properly
#see http://dojotoolkit.org/api/1.8/dojox/layout/ContentPane
It looks like you just need to require these files in the parent widget.