I need to change the application-wide CSS file dynamically for a nativescript app. ( Not the page css file, the application css file)
You can change the app.css file programmatically. In your app.js / app.ts file, add something like:
import application = require("application");
application.cssFile = "style.css";
application.start({ moduleName: "main-page" });
Import application in other places of your application and try to modify cssFile property.
See
https://docs.nativescript.org/ui/styling#application-wide-css
Related
I have a laravel/VueJs app which was normal until I decided to add Vuetify. After installing the Vuetify package with npm, I imported it via a plugin/vuetify.js folder inside my resources/js folder like so(inside plugin/vuetify.js)
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
export default new Vuetify;
I imported into app.js like so;
import vuetify from './plugin/vuetify'
And in the Vue instance added vuetify;
const app = new Vue({
el: '#app',
router,
vuetify
});
My vuetify components work well but some laravel components like the navbar breaks, the height increasing significantly. When I comment out the vuetify import, it goes back to normal. Can somebody help point out a fix or what am doing wrong please?
Laravel 5.8, vuetify 2.0.7
Vuetify and Bootstrap 4 share some of their css class names. You are trying to use two different css frameworks on the same page. Vuetify is probably getting loaded after bootstrap 4 which means it's overwriting some of bootstraps css.
The easy solution is just to use one or the other for your application. There are libraries for vue that allow you to easily use bootstrap 4 with vue. I've used bootstrap-vue before and it works well.
If you REALLY want to use two different css frameworks on the same page you can load vuetify css inside of a class.
e.g.
app.scss
.my-app {
#import 'vuetify/dist/vuetify.min.css'
}
app.vue
<template>
<div class="my-app">
Everything in here is using vuetify
</div>
</template>
In resources/js/app.js there is this line: require('./bootstrap');.
If I add a line below that, require('./custom-stuff');, put custom-stuff.js in resources/js I can see that it's included in app.js. So far so good.
I'm puzzled however by the order that the files are included. If in custom-stuff.js I add:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
it doesn't activate the tooltip, while I see the code being included in app.js.
If I add the tooltip activation code above in my Blade template right before the closing </body> tag (and before the inclusion of app.js), it does work.
Why is this? I would like to keep everything in app.js including custom code that refers to other libraries that are included.
You may try re-ordering the build combination in for your app.js and try checking your webpack.mix.js to do that.
I am trying for the first time to create an application with Laravel 5.7 and ExtJS 5.
There is a lot of information for Laravel / Vue and Laravel / Angular applications, but for Laravel / ExtJS it is practically non-existent (unfortunately).
I created an ExtJS app called extjs_app with cmd that I put in the public folder of the Laravel project.
In the Laravel views folder I created a view named index_extjs.blade.php containing the index.html code of the ExtJS app with the following change:
<script id="microloader" type="text/javascript" src="bootstrap.js"></script>
replaced for
<script id="microloader" type="text/javascript" src="extjs_app/bootstrap.js"></script>
And in the bootstrap.js file (I probably should not edit this file):
Ext.manifest = Ext.manifest || "bootstrap.json";
replaced for
Ext.manifest = Ext.manifest || "extjs_app / bootstrap.json"
And in the app.json file
indexHtmlPath": "index.html"
replaced for
"indexHtmlPath": "../../../resources/views/index_extjs.php"
However, despite several attempts, the files required for the ExtJS application are not loaded.
How to properly configure Laravel and ExtJS to work together?
You need to set the root route for the entire application to be served with your blade view, in your case index_extjs.blade.php.
Why? Because when anyone opens up your site, you are loading up that page and hence, loading extjs too. After that page is loaded, you can handle page changes through extjs.
So to achieve this, you need to declare your root route to server this index file:
Route::get('/', function() {
return view('index_extjs');
});
Also you need to revert all extjs config changes back to default, because everything will be relative to your extjs app inside public folder and not relative to the project itself. I hope this makes sense
Laravel serves client side (HTML, CSS, JS) files from the /public folder by default. I am currently transitioning a Blade based front-end to an Angular based one. As a result, I am mixing Blade templating with Angular templating. I am using Blade layouts to generate a navbar, footer, and other common views while I transition the body content of my pages to Angular.
I have a folder constructed just for storing Angular files. My current app structure looks something like this:
-MyApplication
-angular
-app
-bin
-bootstrap
-config
-database
....
Is there anyway for Laravel to load my assets - stored in the /angular folder? I want to keep all my Angular files in one place, in standard Angular structure, as opposed to spreading them out and placing them in the /public Laravel folder.
You can try to create a symbolic link inside the public directory to your intended angular directory. Open your terminal and create a symbolic link like so:
ln -sfv ~/path/to/MyApplication/angular ~/path/to/MyApplication/public/angular
Don't forget to update the ~/path/to/MyApplication to your actual Laravel directory. Now you may refer to the javascript file inside the angular directory like this on your blade template:
<script src="{{ asset('angular/app.js') }}"></script>
Hope this help!
We are trying to use CKEditor as a Widget for Vignette, when we try to specify a content css outside the environment of CKEditor such as:
"CKEDITOR.config.contentsCss = 'http://lvhost:27110/CKEditorbk/my.css';"
doesn't work, but when we specify a content css included in the war where we have our deployment of ckeditor such as:
CKEDITOR.config.contentsCss = 'http://lvhost:27110/CKEditor/ckeditor/my.css';
It's working as we expected. Isn't possible to specify a css outside "CKEditor.basepath"?
In fact you can't because CKEditor path scope is anything within a folder named ckeditor.
However you could have your custom css outside the CKeditor's ckeditor by replicating the same folder structure, that is /js/CUSTOM_CKEDITOR/ckeditor. I've done so when I wrote a plugin for CKeditor.
I have a custom css at /js/CUSTOM_CKEDITOR/ckeditor/plugins/my_plugin/css/custom.css. And in my /js/CUSTOM_CKEDITOR/ckeditor/config.js I used:
CKEDITOR.config.contentsCss = CKEDITOR.plugins.getPath( 'my_plugin' ) + 'css/custom.css';
Works sweet :)