In my vue/cli 4/vuex / bootstrap-vue app I added leaflet and got broken layout.
Asking I have got a link to this
Leaflet drawing tiles disjointly
branch, saying that I did not include css in my file.
On the link I found :
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
Looks like that is the only css on this page.
So I opened the link and copied all css into my .vue file
in block
<style lang="scss" scoped>
...
</style>
Also I uploaded all images from these links into project/public/images
and edited all all images path in the definitions.
But map was not looked properly and looks like:
In my code I init map with :
var pointsMap = L.map('mapid', {zoomControl: false}).setView([51.505, -0.09], 7);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 5,
attribution: 'Map data © OpenStreetMap contributors, ' +
'CC-BY-SA, ' +
'Imagery © Mapbox',
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1
}).addTo(pointsMap);
Can the issue be with different versions of leaflet api and css ?
How better to deal it?
Thanks!
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 am using vue-svg-loader to use my svg files as a component in Vue project. When I am rendering those svgs I am losing default css properties that are inside of the svg file. I can add those css properties inside of my component where I am rendering svg files, but that kind of violates the idea of reusable components since each svg file has its own property. Is there a way to inherit their css?
'''
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
viewBox="0 0 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:none;}
.st2{fill:#FFFFFF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;stroke-dasharray:10;}
.st3{font-family:'ArialMT';}
.st4{font-size:32px;}
</style>
<font horiz-adv-x="2048">
'''
Likely what is happening is that all of your SVG files use the same class names (st0, st1, etc). They are overriding each other. You'll need to:
manually rename the classes in each file, so they use different names, or
That file looks like it came from Illustrator. Assuming they all did, then load the SVGs back into Illustrator, and re-export them. This time change which method AI uses to set the element styles. I don't have AI handy right now, but there will probably be three options (I don't recall exactly what they are called):
Internal CSS - what the file above is using
Style attributes - uses the style="..." attrinbute
Attributes - uses attributes like fill="#ff0000"
If you need to style the SVGs with CSS in your page, you'll probably want to use the last option. That's because style attributes have a higher priority than CSS, so you would need to use the CSS !important flag, which is not generally recommended.
I've found that the vue-svg-loader documentation is pretty thin, mainly because all its configuration is done via the svgo library. There are some clues in this FAQ, which shows you how to customise the svgo configuration in your webpack config.
So maybe you want something like this in your vue.config.js file:
module.exports = {
chainWebpack: (config) => {
const svgRule = config.module.rule('svg');
svgRule.uses.clear();
svgRule
.use('babel-loader')
.loader('babel-loader')
.end()
.use('vue-svg-loader')
.loader('vue-svg-loader')
.options({
svgo: {
plugins: [
addClassesToSVGElement: {
classNames: ["foo", "bar"],
}
],
},
});
},
};
i'm trying to build live stream player
i tried Calppr but it's not work
<script type="text/javascript" src="../../assets/clapper/clapper.min.js"></script>
<script type="text/javascript">
var playerElement = document.getElementById("player-wrapper");
var player = new Clappr.Player({
source: 'Here is my source',
poster: 'http://clappr.io/poster.png',
mute: true,
height: 360,
width: 640
});
player.attachTo(PLAYERELEMENT);
</script>
the Error is that Clappr Not Defiend
i tried use CDN also but the same error again
can someone help me or lead me to another player that supports VUE JS
In Vue with your code Your player init code should be in mounted() of component containing #player-wrapper. Also make sure that your clappr import is in html template not in *.vue file of component. Or imported in script section of *.vue like this: import Clappr from 'clappr'. And make npm i clappr
It is a noobish question.
I am writing an expressjs app. I am not able to get jquery or bootstrap working.
// app.js
app.use(express.static(__dirname + '/public'));
Also tried
app.use(__dirname + '/public');
or
app.use(path.join(__dirname + '/public'))
or
app.set(__dirname + '/public');
or
app.set(path.join(__dirname + '/public'))
// views/home.html
<head>
<script src="/js/jquery.min.js"></script>
</head>
<body>
<script>
$(function(){
alert('hello');
});
</script>
</body>
//public>js>jquery.min.js
It is not working. I am using express 4.
Template works fine other than jquery
I have a need for this to work offline while writing this app, so can not use CDN
DIRECTORY STRUCTURE
app.js
views
--layouts
--partials
public
--js
----jquery.min.js
Using 'hbs' package, handlebars for templating
Thanks
Looks to me like you shouldn't be able to reach your view with your current setup. When you say app.use(express.static(__dirname + '/public'));, you are saying that when you hit http://{hostname}:{portNumber}, you'll be served content from the the /public folder. You shouldn't be able to access any resources on your file system that do not fall within the /public folder. So maybe if you set up a folder structure like:
app.js
--public
----views
------layouts
------partials
------home.html
----js
------jquery.min.js
that I think would work (assuming that your view.html still points to jquery.js in the folder structure correctly).
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...