Develop Reference

Opera Mini flex not wrapping

On Android 4.1, Opera Mini 33 doesn't support css flex layout. It does use the old 2009 flex standard (display: -webkit-box) except of box-lines: multiple;
I can not break a flex line, nothing is working:
box-lines: multiple;
-webkit-box-lines: multiple;
flex-wrap: wrap;
-webkit-flex-flow: row;
-webkit-flex-flow: wrap;
On other Android (7) it respects new flex syntax, with flex-wrap: wrap; Caniuse.com showes that Opera Mini supports flex, but it clearly doesn't.
Have someone faced this issue? Switching between data saving modes seems to be an option, the flex works ideally on mode "Extreme" but on all the other 3 modes it doesn't. I've reinstalled the Opera, even wiped out the system - no change.
How can I break the flex line in Opera Mini on Android 4.1?
This is my actuall code:
<div class="test">
<div></div>
<div></div>
<div></div>
</div>
.test {
display: -webkit-flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-lines: multiple;
box-lines: multiple;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
height: 300px;
margin: 100px auto;
width: 600px;
-webkit-flex-flow: row;
-webkit-flex-flow: wrap;
}
.test > div {
width: 100px;
flex-grow: 1;
background: pink;
height: 200px;
}
.test > div:nth-child(2) {
background: yellow;
}
.test > div:last-of-type {
background: blue;
width: 100%;
}

No one seems to know the answer so I share my solution.
Partial solution could be detecting by JS if browser supports flex-wrap and then add a class to the body and make separate styles for that.
This is the only way to do the detection, because Opera Mini in it's useragent includes "Opera Mini" only on "Extreme" mode data saving, any oher case Opera Mini showes as Opera Mobile (but actuall Opera Mobile works perfectly with the newest flex).
This simple code is enough to detect flex-wrap support:
var d = document.documentElement.style
if (!('flexWrap' in d) && !('WebkitFlexWrap' in d) && !('msFlexWrap' in d)){
document.getElementsByTagName('body')[0].className+=' not-full-flex-support'
}
It is taken from this answer: https://stackoverflow.com/a/27047981/2796533

Android WebView Responsive Youtube not playing

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

ionic ion-tab icon with custom image

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>

Site footer is shaky on my mobile device

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.

Can't get :active or :hover effects to work in Android

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.