Getting error while loading css on angular5 with ngx-bootstrap
Refused to apply style from 'http://localhost:3000/node_modules/ngx-bootstrap/datepicker/bs-datepicker.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
i have include css only in index.html
<link href="../node_modules/ngx-bootstrap/datepicker/bs-datepicker.css" rel="stylesheet"/>
You can also add the style in your .angular-cli.json, if you're using ng-cli. Then Angular CLI will take care of adding the file to index.html for you:
{
...
"styles" : [
"../../../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../../../node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
"styles.scss",
...
],
...
}
Alternatively, if not angular-cli, then webpack can take care of this for you.
try adding the following inside of your link tag :
type="text/css"
Best regards
Related
I created a Blazor WebAssembly hosted template in .NET Core 3.1. Then right clicked on project.Client/wwwroot/css folder and clicked on Add client side library. Then selected the Font Awesome library and installed it. I added the below line to index.html <head>.
<link href="css/font-awesome/css/fontawesome.css" rel="stylesheet"/>
I have libman.json of:
{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": [
{
"library": "font-awesome#5.11.2",
"destination": "wwwroot/css/font-awesome/"
}
]
}
I added just the below line to the default Blazor template page Counter.razor (Razor component). The IntelliSense finds the font:
#page "/counter"
<h1>Counter</h1>
<span class="fa fa-save"></span>
#code {}
but I only see a square:
You also need to include the JavaScript.
<link rel="stylesheet" href="css/font-awesome/css/fontawesome.min.css" />
<script src="css/font-awesome/js/all.min.js"></script>
You can put the <script> tag below the other one at the bottom of the file but I doubt that you'll notice any speed difference.
From a now deleted comment:
The JS is just one option (the preferred option), but CSS only is still an option as well. Also, you don't use both. It's either CSS or JS
In Blazor I could only get the JS version to work. CSS only didn't work (the file was 200-OK).
The fa prefix has been deprecated in version 5. The new default is the fas solid style and the fab style for brands. ref
add to _hosts.cshtml (for server side)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
Use fas as below:
#page "/counter"
<h1>Counter</h1>
<span class="fas fa-save"></span> <!--fas not fa-->
#code {}
This is tested in blazor Net5
You can use libman (or copy the files manually from the zip available at Fontawesome website). Then install/copy only all.min.css and the whole contents of webfonts folder into wwwroot/css/font-awesome subfolder. Like this:
Then put this into Pages/_Host.cshtml (for Blazor Server) or wwwroot/index.html (Blazor Web Assembly) into the head section:
<link rel="stylesheet" href="css/font-awesome/css/all.min.css" />
Or, as an alternative, add this at the beginning of site.css:
#import url('font-awesome/css/all.min.css');
No need for JS. It works.
You have to actually reference the stylesheet in your HTML page. This is usually done in the layout (_Layout.csthml). You need to add something like the following in your <head>:
<link rel="stylesheet" href="/css/font-awesome/font-awesome.min.css" />
FontAwesome have multiple framework supported (Vue, React, Angular, WordPress, LESS, SCSS). But I don't know why they are not providing it for Blazor.
So that, I have created "Brushtail.FontAweomse.Blazor" nuget package.
Instructions https://www.nuget.org/packages/Brushtail.FontAwesome.Blazor/
I need to conditionally import a file during a particular type of build. Using grunt-contrib-jshint#0.7.0 which is on top of less#1.4.2
What I tried thus far...
Trying to use protected mixins to determine the type of build I require and namely, to skip imports of certain less files that break in dev mode.
#isProduction: 1;
...
.getImports() when (#isProduction = 1){
}
.getImports() {
#import "productionStyles";
}
...
.getImports();
however, this seems to fail and it tries to import and parse productionStyles.less all the time. I guess protected mixins does not cover #import, so how would you solve that?
I also tried
#productionStyles: "productionStyles"; // or 0
...
#productionStyles: 0;
.getImports() when not (#productionStyles = 0){
#import "#{productionStyles}";
}
...
to same avail, it will try to import it anyway >> FileError: '0.less' wasn't found in ....
I am starting to think it will need a bigger refactor where devStyles and productionStyles are both a thing and I just switch between them - it's just that productionStyles was an addition that can only compile after a full build due to deps and I would much rather solve this by compiling conditionally.
I can also move away from using grunt-contrib-jshint and write my own less parser but would like to explore the built-in options first.
As the productionStyle.less references several files that are not in the file system, is it possible to ignore the #imports that fail and continue building? I would prefer not to disable error checking/break on all errors due to possible parser errors elsewhere...
I've solved your problem using switch parameter:
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet/less" type="text/css" href="style.less" />
<script src="less.js" type="text/javascript"></script>
</head>
<body>
[foo]
</body>
</html>
style.less
.mixin(production) {
#import "test.less";
background: #color;
}
.mixin(dev) {
background: green;
}
html {
.mixin(production);
}
test.less
#color: red;
less.js is less v1.4.1 downloaded straight from project page.
Code about should result in red background.
Switching to html { .mixin(dev); } disables #import and background turns green.
It's possible that your solution would work, too, but you have errors in HTML or something like that - I haven't checked that.
I'm trying to add a simple progress bar to my application in rails using jquery-ui. I'm following this example: http://jqueryui.com/progressbar/
I create the div
<div id="progressbar"></div>
and in my JS I have
$(document).ready( function() {
$("#progressbar").progressbar({
value: 37
});
});
But nothing happens to the div in the html - it remains empty and unstyled(ie no additional CSS is applied to it).
I have checked that I have jquery-ui included in my application - in particular, I have made certain the jquery-ui css file is included.
However, I am willing to bet the problem has something to do with jquery-ui not working properly in my app, because I was having another issue with it and the tooltip function, which I asked about over here: positioning jQuery tooltip
This is driving me nuts, does anyone have any ideas?
I had the same problem right now.
It seems like the referenced libaries in the example do not work.
The error i get from the "Firefox - Developer Tools - Browser Console" is:
ReferenceError: $ is not defined
(I tested on Firefox 32.0.3 and IE 11)
If you just copy the example html/jquery source from "http://jqueryui.com/progressbar/" to a local file (lets call it: "testJqueryProgressBar.html") and double click it, you will see no progress bar!
Source of "testJqueryProgressBar.html":
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Progressbar - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//jqueryui.com/resources/demos/style.css">
<script>
$(function()
{
$( "#progressbar" ).progressbar({ value: 37 });
});
</script>
</head>
<body>
<div id="progressbar"></div>
</body>
</html>
Therefore i checked the links in the header of the example and all reference something.
So the links are valid!
I even tried to reference the jquery libs from another provider, f.e. : https://developers.google.com/speed/libraries/devguide?hl=de#jquery-ui.
Same problem!
Then i went to http://jqueryui.com/download/
Selected Version : 1.11.1 (Stable, for jQuery1.6+)
Selected a different UI theme at the bottom
Downloaded the zip and referenced these unziped jquery sources in my local example testJqueryProgressBar.html and it worked.
I want to use a simple Sencha Touch keypad plugin.
The plugin code can be found over here.
The keypad can be created in an html file under tags as follows:
<script>
Ext.setup({
onReady: function () {
var basic = new Ext.ux.Keypad();
basic.render('keypad');
}
});
</script>
<div id="keypad"/>
Alternatively, it can be used in a Sencha container as follows too:
...
items:[
{
xtype: 'keypad'
}
]
However, I am not able to get it to work the latter way. I'm new to Sencha and I think I'm not placing the files at the right places or not including them properly. I have already included the following in my index.html:
<script type="text/javascript" charset="utf-8" src="js/sencha-touch-1.1.1/sencha-touch.js"></script>
<link rel="stylesheet" type="text/css" href="js/sencha-touch-1.1.1/resources/css/sencha-touch.css">
<script src="js/Keypad.js" type="text/javascript" charset="utf-8"></script>
Can someone let me know what modifications are necessary in which files so that I can use the keypad plugin directly in a container?
in your app.js file you need to set path for the plugin folder in the loader...
put the ux (plugin)folder where your app.js is located...
in app.js set the following
Ext.Loader.setPath('Ext.ux', 'ux');
On the view where you are using the numpad you need to specify a
requires: ['Ext.ux.NumPad' ...] //All plugin related files
Also ensure that the CSS files are in the proper location...
Hope it helps...
I have a website that is rendering a prototype based calender on 90% of the pages. I'm also looking at using the Uploadify module for handling multiple uploads with Paperclip. As you know, Paperclip and JQuery don't play nicely and a lot of the solutions I've tried such as NoConflict hasn't worked for me I still get the "not defined" errors in firebug all over the place. I'm wondering what the best way for me to approach adding this JQuery module that will be very localized in a largely Prototype-based application. I've considered switching my Prototype code with JQuery but I've yet to see a better JQuery solution for this particular calendar plugin that I'm using.
Use a proper structure for noConflict.
<script src="prototype.js"></script>
<script src="someprototypeplugin.js"></script>
<script src="jQuery.js"></script>
<script src="uploadify.jquery.js"></script>
<script>
$.noConflict();
jQuery(document).ready(function($){
$("#someelement").uploadify();
});
</script>
If this doesn't answer your question, please provide more(some) code.
Edit for comments:
Just run the $.noConflict() immediately following your jQuery plugins, and then use jQuery instead of the $ variable throughout your JS files.
<script src="prototype.js"></script>
<script src="someprototypeplugin.js"></script>
<script src="jQuery.js"></script>
<script src="uploadify.jquery.js"></script>
<script>
$.noConflict();
</script>
sample js file:
(function($){
// since we passed a reference to jQuery to this anonymous
// function and accepted it as a parameter named "$", we can
// safely use "$"
$("#target").uploadify();
})(jQuery);
If you need a document ready, you can do it this way:
jQuery(document).ready(function($) {
$("#target").uploadify();
});