I did "ionic start myApp sidemenu" to start a sidemenu app. It starts with the "Playlists" page with 6 items. I click on one of those, say "Raggae" and it takes me to the "Playlist" page. At this point, the sidemenu does not open when I sweep from left to right.
In the following plnkr example from another StackOverflow question, the sidemenu does open after I nagivate to the "Playlist" page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
<title></title>
<link data-require="ionic#1.0.0-beta.1" data-semver="1.0.0-beta.1" rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="ionic#1.0.0-beta.1" data-semver="1.0.0-beta.1" src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="app.js"></script>
<script src="controllers.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
http://plnkr.co/edit/0RXSDB?p=preview
Is this my local environment problem or something wrong with the sidemenu template code?
With a brute force method, I found out the ionic.bundle.js come with the "ionic start myApp sidemenu" is causing the problem. If I inlcude the ionic 1.0.0-beta.1 version as in the plnkr example, the problem is gone. But the beta version is causing other different behavior in navigation. Hopefully ionic gets better.
Related
In local dev, everything is great because my Tailwind CSS is taking priority on styling my icons:
However, once I've deployed my app (Vite on Vercel), for some reason the Material Icons style takes priority:
This is my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/png+xml" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Come on now!</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ['Roboto:400,700', 'Material+Icons']
}
});
</script>
</body>
</html>
I think I could probably apply !important to my Tailwind config but that's clearly not the right answer.
I was following the Browser section of official documentation https://bootstrap-vue.org/docs, however the BootstrapVue components just didn't render as expected.
html file as follow:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>webapp</title>
<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap#4.6.0/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.min.css" />
<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue#2.6.12/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.min.js"></script>
<!-- Load the following for BootstrapVueIcons support -->
<script src="//unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue-icons.min.js"></script>
</head>
<body>
<div>
<h2>Example heading <b-badge>New</b-badge></h2>
</div>
</body>
</html>
What I see is 1
Instead of 2
What should be fixed to get the components rendered properly?
The issue is resolved, I have to add below code somewhere(e.g. main.js):
new Vue(...).$mount("#div_where_vue_should_render")
I have the following code:
<head>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<title>EPDM Polymers | EPDM Rubber Granules | Poured-In-Place Rubber</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="./css/main.css" />
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script type="text/javascript" src="./js/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
<link rel="stylesheet" href="./js/BackToTop.jquery.css" type="text/css" />
</head>
However, The favicon is not showing up on www.epdmpolymers.com I have the favicon.ico file in my images folder. Any ideas?
You have 2 links for favicon.ico, try removing the first link from your code. I guess it would work for you.
Or once again cross-check the path of the image, try using relative path to the file.
For example: If your image is in root/images folder, so use (/images/favicon.ico)
One of my favorite debugging methods is to download and use a favicon.ico file from a working site like http://www.google.com/favicon.ico
If it works then the issue will be because of your file size or
format.
If it does not work then the issue will be either with the
html tag.
To rule out file permission issue try accessing your favicon file
directly using its url through the browser address bar.
New to ionic I am having a play and have come across this issue. I have created an app that runs an XMLHttpRequest to get some data from a secure site. If I load the app's index.html file directly the data loads fine but not if I run ionic serve. The error is, I think, because the request is coming from localhost as on inspection I see the error.
Origin http://localhost:8100 is not allowed by Access-Control-Allow-Origin.
I am interested to know if I am going to run into ionic specific issues if I continue testing the app directly from the index file, and/or is there a way of allowing the ionic serve method access the data?
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-calm">
<button class="button icon ion-navicon button button-clear"></button>
<h1 class="title">Log</h1>
<button class="button icon ion-gear-b button button-clear"></button>
</ion-header-bar>
<ion-content>
<script type="text/javascript">
var xmlhttp = new XMLHttpRequest();
var url = "https://xxxxx/getLog.php";
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('listLog').innerHTML=xmlhttp.responseText;
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
</script>
<p id="listLog"></p>
</ion-content>
</ion-pane>
</body>
</html>
I solved the same issue by installing Allow-Control-Allow-Origin: * plugin in my Google Chrome.
I have this link to a chess game but instead of it just displaying on the page id like it to be in a pop up. iv got videos, images, websites ext to pop up but having trouble with this. iv tried using a hidden div but couldnt get it to work.
I would much appreciate it if anyone could help.
thanks in advance
stephen
site with game i want to embed.
http://www.freegaming.de/onlinegames/Casino-|-Card-|-Board-Games/Classic-Chess-Game.html
I Read about Fancybox Usage in its home page...
Make sure You Have latest fancybox, folder layout like this...
It's a quick solution :) but it works!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My Title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
$(document).ready(function() {
$("#various4").fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none'
});
});
</script>
</head>
<body>
<a id="various4" href="http://www.freegaming.de/components/flash//classic chess.swf">Swf</a>
</body>
</html>
I think now it's the asked solution....