I have a VUE page where I try to render a badge. It shows the text but only white. I tried also with bootstrap badges with the same results.
This is the code of the page:
<!DOCTYPE html>
<html>
<head>
<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.css" />
<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue#latest/dist/vue.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
<!-- Load the following for BootstrapVueIcons support -->
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue-icons.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet">
</head>
<body role="document">
<div class="panel-body">
<div id="start">
<h2>b-badge: <b-badge variant="primary">b-badge</b-badge> {{foo}} </h2>
class: <span class="badge">span</span>
</div><!-- start -->
</div>
<script src="/js/vue/start.js"></script>
</body>
</html>
This is the javascript with VUE code loaded from start.js before.
var start = new Vue({
el: '#start'
,
data: {
foo: "bar"
}
});
VUE loads because I spot the result of the foo variable in the page. But the badge will only show white text no matter what class I try to load. Both with bootstrap and bootstrap-vue.
This is what is rendered:
If I select the text I can see there is a white text where the badge should be.
I tried many other VUE code and everything works fine including a navbar. I also tried to import the Badger but I can't manage to do that. I only get that error:
"import declarations may only appear at top level of a module"
My guess is as I am using CDN loaded VUE I don't need to do the import. Also I searched if I have to load the Badge javascript or CSS from another link at the header but I can't find it anywhere.
Any hints ? Thank you very much.
The issue it with the version of Bootstrap you're importing.
The following line
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.css" />
will import the latest version of Bootstrap, which is Bootstrap 5, released a couple of weeks ago.
While BootstrapVue is currently built for Bootstrap 4.5.3.
So if you change the import to specifically import version 4.5.3, it should work correctly.
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap#4.5.3/dist/css/bootstrap.css" />
new Vue({
el: "#start",
data() {
return {
foo: "bar"
}
}
})
<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap#4.5.3/dist/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.css" />
<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue#latest/dist/vue.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
<!-- Load the following for BootstrapVueIcons support -->
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue-icons.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet">
<div id="start">
<h2>b-badge:
<b-badge variant="primary">b-badge</b-badge> {{ foo }} </h2>
class: <span class="badge">span</span>
</div>
Related
Hello everyone i am quite lost right now, in my other react projects onClick is working just fine but now with my new app laravel with react i cannot do an Onclick this is crazy i dont know where the problem is because i have no error in the console...
EDIT
I finally found the problem, i imported twice a js file in my layout
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link rel="stylesheet" href="{{ asset('css/bootstrap.css')}}">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
</head>
<body>
#if (Auth::user())
#include('inc.navbar')
#endif
<main class="py-4">
#yield('content')
</main>
<script type="text/javascript" src="js/app.js"></script>
can you try please to add to the button tag ( type="button" ) , if its not working try to remove the taskform component to check if there is error in the component
I also just faced this problem when using laravel 8 mix react 17, the solution is to downgrade to react 16.
I have been looking at different forums that include this error and trying different things that I have read to get rid of this error. I have tried removing any duplicate libraries, and changing the order in which they appear, but nothing has seemed to worked for me. I am using a bootstrap theme
scrollreveal.min.js:1 Uncaught TypeError: Cannot set property 'sequence' of
undefined
at e.reveal (scrollreveal.min.js:1)
at jquery.js:53
at jquery.js:75
I am not sure what to do to get rid of it, any help would be great. Thanks in advance.
Below is what I have in the head section
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800'
rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic'
rel='stylesheet' type='text/css'>
<!-- Plugin CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="./css/creative.min.css" rel="stylesheet">
<link href="./css/style.css" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
And this is what I have at the end of the body.
<!-- Bootstrap core JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollReveal.js/3.3.6/scrollreveal.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/creative.min.js"></script>
<script src="js/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
The error is not "self explanatory"...
But the line where the error fired, line #75 of jquery.js (A custom JS file, not the library), was containing a closure syntax: })(jQuery); that was not needed.
Replacing it by }); fixed the issue for that line.
Then, the same issue fired on 3 other lines... But after those lines also fixed, the page worked as expected without error.
"Closure" itself is already well explained in this SO answer.
I'm a happy amateur trying to build my own website, and thought I'd use Quill as a nice texteditor for articles and stuff. When going through the starting example, it simply doesn't work.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.quilljs.com/1.1.9/quill.js"></script>
<link href="https://cdn.quilljs.com/1.1.9/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.1.9/quill.core.js"></script>
<link href="https://cdn.quilljs.com/1.1.9/quill.core.css" rel="stylesheet">
</head>
<body>
<div id="editor">
<p>Hello World!</p>
<p>Some initial <strong>bold</strong> text</p>
<p><br></p>
</div>
<script>
var quill = new Quill('#editor', {
theme: 'snow'
});
</script>
</body>
</html>
It gives me the following error message in the console:
quill Cannot import themes/snow. Are you sure it was registered?
What am I missing?
Where and how am I supposed to register it?
Quick edit:
Should also say I tried with bubble instead (and of course changed the CSS in the head).
When I tried with modules I got the same error message for each module as well.
You are including Quill twice and the second time is a reduced version without themes. Just include the main library:
<script src="https://cdn.quilljs.com/1.1.9/quill.js"></script>
<link href="https://cdn.quilljs.com/1.1.9/quill.snow.css" rel="stylesheet">
Core should go before everything else to work.
<!-- Core build with no theme, formatting, non-essential modules -->
<link href="//cdn.quilljs.com/1.2.3/quill.core.css" rel="stylesheet">
<script src="//cdn.quilljs.com/1.2.3/quill.core.js"></script>
<!-- Main Quill library -->
<script src="//cdn.quilljs.com/1.2.3/quill.js"></script>
<script src="//cdn.quilljs.com/1.2.3/quill.min.js"></script>
<!-- Theme included stylesheets -->
<link href="//cdn.quilljs.com/1.2.3/quill.snow.css" rel="stylesheet">
<link href="//cdn.quilljs.com/1.2.3/quill.bubble.css" rel="stylesheet">
Here's a working version on codepen
All it uses is:
<link href="https://cdn.quilljs.com/1.2.2/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.2.2/quill.js"></script>
and for my container I used:
<div id="myDiv"></div>
The initialization script is the simplest:
var quill = new Quill('#myDiv', {theme: 'snow'});
No errors.
So I guess your last loading script is quill core without build in theme.
Next code taken from quill website:
<!-- Main Quill library -->
<script src="//cdn.quilljs.com/1.3.6/quill.js"></script>
<script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>
<!-- Theme included stylesheets -->
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">
<!-- Core build with no theme, formatting, non-essential modules -->
<link href="//cdn.quilljs.com/1.3.6/quill.core.css" rel="stylesheet">
<script src="//cdn.quilljs.com/1.3.6/quill.core.js"></script>
And it clearly states in comment "Core build with no theme"
In order for you to load quill:
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- Include the Quill library -->
<script src="//cdn.quilljs.com/1.3.6/quill.js"></script>
<!-- Include stylesheet -->
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">
</head>
Time ago we purchased this template and we have used it in an angularJS application without any problem.
Now for another project we have switch to Angular 2 and we want use the same theme but we got this weird behaviour: sometimes works as expected but most of the times isn't working.
We have inspected the code using the firefox console and this is the result when is working:
And this is the output console when is not working:
For an (mine) unknown reason sometimes materialize.min.js is not listening for events.
Unfortunately due to copyright issue I can't post the materialize.min.js source code but I can post mine:
index.html
<html>
<head>
<base href="/">
<title>Angular QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
<link href="css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection">
<link href="css/style.min.css" type="text/css" rel="stylesheet" media="screen,projection">
<link href="css/layouts/style-fullscreen.css" type="text/css" rel="stylesheet" media="screen,projection">
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
<!--materialize js-->
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template: `
<header-navbar></header-navbar>
<div id="main">
<!-- START WRAPPER -->
<div class="wrapper">
<navbar></navbar>
<section id="content">
<div class="container">
<router-outlet></router-outlet>
</div>
</section>
</div>
</div>
`
})
export class AppComponent { }
EDIT
Even if I use a local copy of jQuery is not working properly.
Provided your materialize.min.js relies on jQuery, I would suspect the reason it works sometimes and not others is that your CDN link is not always loading correctly. I might suggest downloading a copy of jQuery and loading it from a local source that you control.
Edit: When you say "not working" when loaded from a local source, do you mean it is still working sometimes but not consistently? Or do you mean not working at all?
My cordova app is not worthy any more.
It shows up angular expressions on application run.
shows white screen at times at launch
I think it might be issue of JS dependencies.
I posting my JS dependencies order
<!-- JS dependencies (order matters!) -->
<script src="scripts/platformOverrides.js" type="text/javascript"></script>
<script src="lib/angular/angular.js" type="text/javascript"></script>
<script src="lib/onsen/js/onsenui.js" type="text/javascript"></script>
<script src="lib/jquery-2.1.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyD5sCjiaGLF8i8zul_W4GBsnMBY9mZTdB4&libraries=places"></script>
<!-- Cordova reference -->
<script src="cordova.js"></script>
<script src="scripts/index.js" type="text/javascript"></script>
<script type="text/javascript" src="bower_components/ngCordova/dist/ng-cordova.js"></script>
<!-- CSS dependencies -->
<link rel="stylesheet" href="lib/onsen/css/onsenui.css" />
<link rel="stylesheet" href="lib/onsen/css/onsen-css-components-blue-basic-theme.css" />
<!-- <link rel="stylesheet" type="text/css" href="lib/pace.theme.css"> -->
<!-- CSP support mode (required for Windows Universal apps) -->
<link rel="stylesheet" href="lib/angular/angular-csp.css" />
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" href="animate.css" />
screenshot of issue
Is this because of wrong order of the dependencies or internet problems or anything I'm missing or I could do to work it perfectly
This might be a little late, but this can be solved by doing 2 things. 1.) Increase the time the splash screen is shown via the config.xml file to about 5000 ms. 2.) In the ons.ready() function, add: navigator.splashscreen.hide();
This shows the splashscreen, hiding the white screen as your libraries load, and then hides it when the app is ready. This solved my problem.