Here's my original question on ionic forum. There has been no responses to it for some time so I thought I could hopefully get some help from here :(
So, my question is really the title. I would like to use my custom image as the icon for ion-tab in my ionic application. I've checked that it works via ionic serve by doing it as the following:
tabs.html
<ion-tabs class="tabs-icon-bottom tabs-color-active">
<!-- this icon does not load -->
<ion-tab title="LIVE" icon="tab-live energized" href="tab/live">
<ion-nav-view name="tab-live"></ion-nav-view>
</ion-tab>
<ion-tab title="REPLAY" icon="tab-replay energized" href="tab/replay">
<ion-nav-view name="tab-replay"></ion-nav-view>
</ion-tab>
<ion-tab title="SETTINGS" icon="ion-android-options energized" href="tab/setting">
<ion-nav-view name="tab-setting"></ion-nav-view>
</ion-tab>
</ion-tabs>
style.css
...
.tab-live {
background-repeat: no-repeat;
background-size: contain;
background-position-x: center;
background-image: url('../img/live.png');
}
.tab-replay {
background-repeat: no-repeat;
background-size: contain;
background-position-x: center;
background-image: url('../img/replay.png');
}
however, when I run the app on my android device, it says Failed to load resource: net::ERR_FILE_NOT_FOUND for my tab-live and the tab-live icon won't load. From what I understand, this error occurs when the app tries to load a certain asset file before it gets loaded in to the memory. But only the tab-live image fails to load while all other images loads fine.
If it could be of an issue, the tab/live page is what loads when the app starts, and the size of my live.png file is about 5.54kb. I have another image that I use in this tab/live page that is larger this image, but it loads fine and I use an img tag with ng-src={{ btnImage }} to change it around.
So, what could be causing this problem and how could I resolve it?
Thanks in advance.
Custom icons for ionic, You can create your class name
code as bellow...
.export-inactive{
content: url('../img/icons/task-icons/export-inactive.svg'); !important;
}
For example
<div class="tabs tabs-icon-top">
<a class="tab-item">
<i class="icon export-inactive"></i>
Export
</a>
</div>
This error means that file was not found. Either path is wrong or file is not present where you want it to be. Are you sure your image in www/img folder because it's working for me in android.
Please check the file name & extension of image file.
when you test app with "ionic serve" it's case insensitive but on Android device case sensitive is important.
For example:
change "myicon.PNG" to "myicon.png"
I had been working on implementing the same functionality and faced similar issues. Here's my actual reply on Ionic Forum
I do not know if the problem still exists but maybe my answer would help devs who might come across this.
So, here’s how to nail it:
/* In tabs.scss: */
// CSS for Settings icon.
.ion-ios-settings, .ion-md-settings {
content: url(../assets/icon/cutom-selected-icon.svg);
width: 24px;
}
.ion-ios-settings-outline {
content: url(../assets/icon/cutom-unselected-icon.svg);
width: 24px;
}
.ion-md-settings[ng-reflect-is-active=false]{
content: url(../assets/icon/cutom-unselected-icon.svg);
width: 24px;
}
<!-- In tabs.html: -->
<ion-tabs [selectedIndex]="indexselected" >
<ion-tab [root]="tab1Root" tabTitle="Settings" tabIcon="settings"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="abc" tabIcon="abc"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="xyz" tabIcon="xyz"></ion-tab>
</ion-tabs>
Thanks :D
You can do it with SCSS as follow.
SCSS file
// custom icons
ion-icon {
&[class*="custom-"] {
margin: 0 5px 0 0;
vertical-align: middle;
$sz: 20px;
width: $sz;
height: $sz;
}
//in case of active
&[class*="home"][ng-reflect-is-active="true"] {
background: url("../assets/imgs/home_active.png") no-repeat 50% 50%;
background-size: contain;
}
//in case of inactive
&[class*="home"][ng-reflect-is-active="false"] {
background: url("../assets/imgs/home_inactive.png") no-repeat 50% 50%;
background-size: contain;
}
}
HTML
<ion-tab [root]="home" tabTitle="Home" tabIcon="custom-chat"></ion-tab>
Related
We are using static google map url in our ionic application which is working fine in IOS and not working in android. We appended the API key along with the URL and the URL is working in desktop browser and on iOS device. But it is not working on android device and shown blank (white) space.
I have the following code below
home.scss
testmap-image {
.mapcontainer {
position: relative;
img-loader {
width: 100%;
height: 100px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
ion-spinner {
height: 100px;
}
}
}
}
home.html
<div class="map-container">
<img-loader *ngIf="getUrl"
[src]="getUrl"
width="100%"
height="100px"
backgroundSize="cover"
backgroundPosition="center"
>
</img-loader>
</div>
In the above code, I am getting correct URL from getUrl() method.
The URL is :
https://maps.googleapis.com/maps/api/staticmap?center=,22, market street, mumbai,India&zoom=15&size=650x150&key=xxxxxxxxxxxxxxxxxxxx
Can you please let me know what could be the issue and why it is not working on android device?
Regards
I have a very basic WebActivity that serves up a page that has the styling of
CSS
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Next, edit add some HTML around your embed code.
HTML
<div class="video-container"><iframe width="853" height="480" src="https://www.youtube.com/embed/xxxxxx" frameborder="0" allowfullscreen</iframe</div>
If I view this page with the browser on the device, the page loads and the video plays just fine.
However if I use a webview programmed into my app, and load the page,clicking on the like, I get a message on the youtube video window (after the loading spinner) of "An error occurred. Please try again later (Playback ID: xxxxxx) Learn More"
of which learn more does not display anything useful. Idea's on how to go about seeing what is going on? The Android Studio logcat is not displaying any issues?
so it turns out that there are a few more params needed to play embeded iframe videos from YouTube.
Had to add the following to the end of the url string
src="https://www.youtube.com/embed/xxxxxxxxx?version=3&enablejsapi=1"
I have create a demo for it. You may visit my github link
My website http://galnova.com/ has just been given a responsive upgrade. It is fine on browsers but when I look at it on my samsung device the page wont scroll and it shakes like crazy. I could not find any error in the footer class or the structure itself but I am curious to why this is happening.
<footer>
<div class="wrap">
<a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-nd/3.0/88x31.png" /></a><br />This work by <a xmlns:cc="http://creativecommons.org/ns#" href="http://www.galnova.com" property="cc:attributionName" rel="cc:attributionURL">Keith Jeter</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.en_US">Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License</a>.<!--<br />Based on a work at <a xmlns:dct="http://purl.org/dc/terms/" href="http://www.galnova.com" rel="dct:source">http://www.galnova.com</a>.-->
<p class="pull-right">Back to top</p>
<p>© 2015 Galaxy Supernova · <!--Privacy · Terms--></p>
</div>
</footer>
Try adding a defined height to your footer and report back with any effects.
Like so:
#media (max-width: 767px)
footer {
border-radius: 0!important;
border: none!important;
margin: 0!important;
height: 400px;
}
EDIT: Disregard the above; the problem is coming from the Pirobox overlay plugin. From a CSS perspective, a quick fix I noticed is to add overflow: hidden to the .piro_html class in the Pirobox stylesheet you reference, like so:
.piro_html {
position: absolute;
top: 0;
left: 0;
padding: 0;
width: 500px;
height: 500px;
margin: 0;
display: block;
padding: 0;
z-index: 150001;
padding: 0;
overflow: hidden;
}
Doing this causes you to lose the little "X" closure box, but since you can tap anywhere on the exposed body copy to escape the lightbox, that seems to be an acceptable and clean solution. You could also look into playing with the jQuery code.
Let me know if this works for you.
In the Android default browser, I can't get :active or :hover to work at all. I know :hover and :active aren't recommended for use on mobile, but considering they work consistently everywhere except the default Android browser, I figured I'd try it. This code works fine on iOS and Windows Phone, but not on Android, and I can't figure out why.
CSS:
* {
font-family: Arial, sans-serif;
font-size: 14px;
}
#clickBox {
background: #CCC;
padding: 10px;
text-align: center;
width: 100px;
}
#hiddenBox {
background: #BBB;
height: 0;
overflow: hidden;
text-align: center;
transition: height 0.5s;
width: 120px;
}
#clickBox:active ~ #hiddenBox, #clickBox ~ #hiddenBox:active, #clickBox:hover ~ #hiddenBox, #clickBox ~ #hiddenBox:hover {
height: 50px;
}
HTML:
<section id="clickBox" aria-haspopup="true">
Click here!
</section>
<section id="hiddenBox">
This appears!
</section>
JS Fiddle: http://jsfiddle.net/gDRK2/1/
I figured this out. For some reason, Android was firing the :hover event only when the user rotated the phone. I have no idea why that would be, but it is.
So, this is how I fixed it:
if (navigator.userAgent.toLowerCase().indexOf("android") > -1) {
$(document).ready(function() {
$("nav").children("a").click(function(e) {
e.preventDefault();
$(this).next("ul").css("transform","rotate(90deg)");
$(this).next("ul").css("transform","rotate(0deg)");
});
});
};
Basically, I rotate the thing I want to appear on hover, then immediately rotate it back. It causes the :hover to work as expected. It makes literally no sense to me, but it works.
If anyone has any questions about implementing this, please let me know.
I have an Android app using webview to load and display html pages.
But when a new page has just been loaded into the webview, there is sometimes a element which is already hovered. For example the element with id "imhovered" is already hovered and has the blue background of the div (see code below). This happens quite randomly depending on the element structure of the current page and the position of the touch from the user in the previous page.
html code:
<body>
<a href="link1" class="menu">
<div class="qlink">here is div1</div>
</a>
<a href="link2" class="menu">
<div class="qlink"> here is div2 </div>
</a>
<a id="imhovered" href="link3" class="menu">
<div class="qlink">here is div3</div>
</a>
</body>
and the styles:
.menu {
color: red;
text-decoration:none;
font-family:sans-serif;
font-size: 28px;
}
.menu:hover {
color: red;
background-color: green;
}
.qlink {
padding-left: 84px;
padding-top: 24px;
padding-bottom: 20px;
background: url(aaa.png) no-repeat scroll 28px 0px;
}
.qlink:hover {
background-color:blue;
}
My question is how to remove this wrong hovered state of the element ?
I have tried to find a solution for a while with researching and own experimenting but still have no success. Following are what i find out during my experiments:
webview.clearFocus() -> not work
javascript/jquery when dom is ready:
$(document).ready(function () {
alert($("*:hover").attr("id"));--> result:undefined
alert($("*:active").attr("id")); --> result:undefined
alert($("*:focus").attr("id")); --> result:undefined
});
this means that when the dom is ready, there is no focused or hovered element.
javascript/jquery in body onload (when page is loaded):
alert($("*:hover").attr("id")); --> result:imhovered
alert($("*:active").attr("id")); --> result:undefined
alert($("*:focus").attr("id")); --> result:undefined
this means that the hovered state has just appeared now as the page has just been loaded. Is it now too late to do any style modification because the wrong hovered background is already displayed? Is it a bug of webkit/android? I hope you guys can give me any advice to solve this. Thanks in advance!
i finally find out that when the loading process is quick enough, user will not see the style modification, so i do the following style modification and it solves my problem:
window.onload =
function() {
var imhovered = $("*:hover");
var children = imhovered.children();
children.removeClass("qlink").addClass("qlinkNoHover");
imhovered.bind('touchstart touchend', function() {
$(this).children().toggleClass('qlinkFixHovered');
});
}
.qlinkNoHover {
background-color:transparent;
padding-left: 84px;
padding-top: 24px;
padding-bottom: 20px;
background: url(aaa.png) no-repeat scroll 28px 0px;
}
.qlinkFixHovered {
background-color:blue !important;
}
i hope this could help someone who has the same problem.