This question is locked. New answers and comments are not allowed.
Hi i have tried several sample that works with crome firefox ... i runned into icenum ...the simulator also works but in actual androied device it doesnt wok. That means that icenium doesn't support flexbox.
I am posting here two sample
1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Wed, 15 Jan 2014 17:57:20 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title></title>
<style>
.maincointainer
{
display:flex;
diplay: -webkit-flex;
display:-moz-flex;
flex-direction: column ;
-webkit-flex-direction:column;
-moz-flex-direction:column;
}
.Compdeal{
display :flex;
display: -wbekit-flex;
display: -moz-flex;
flex-direction: column ;
-webkit-flex-direction:column;
-moz-flex-direction:column;
}
.scrollmap{
display :flex;
display: -wbekit-flex;
display: -moz-flex;
flex-direction: row ;
-webkit-flex-direction:row;
-moz-flex-direction:row;
}
.CompanyName
{
background-color:yellow;
flex:5 ;
-webkit-flex:5;
-moz-flex:5;
}
.DealDetail{
background-color:red;
flex:5 ;
-webkit-flex:5;
-moz-flex:5;
}
.Scroller{
background-color:blue;
flex:5 ;
-webkit-flex:5;
-moz-flex:5;
}
.map
{
background-color:black;
flex:5;
-webkit-flex:5;
-moz-flex:5;
}
</style>
</head>
<body>
2.
.m_container{
display: flex; /*Opera*/
display: -webkit-flex; /*Chrome*/
display: -moz-box; /*Firefox*/
display: -ms-flexbox; /*IE*/
display: -webkit-box; /*Safari*/
flex-flow: column; /*Opera*/
-webkit-flex-flow: column; /*Chrome*/
-moz-box-orient: vertical; /*Firefox*/
-ms-flex-flow: column; /*IE*/
-webkit-box-orient: vertical; /*Safari*/
flex: 1; /*Opera*/
-webkit-flex: 1; /*Chrome*/
-moz-box-flex: 1; /*Firefox*/
-ms-flex: 1; /*IE*/
-webkit-box-flex: 1; /*Safari*/
}
.m_col_a{
flex: 1; /*Opera*/
-webkit-flex: 1; /*Chrome*/
-moz-box-flex: 1; /*Firefox*/
-ms-flex: 1; /*IE*/
-webkit-box-flex: 1; /*Safari*/
width:100%;
}
.m_col_b{
flex: 9; /*Opera*/
-webkit-flex: 9; /*Chrome*/
-moz-box-flex: 9; /*Firefox*/
-ms-flex: 9; /*IE*/
-webkit-box-flex: 9; /*Safari*/
width:100%;
flex-flow: column; /*Opera*/
-webkit-flex-flow: column; /*Chrome*/
-moz-box-orient: vertical; /*Firefox*/
-ms-flex-flow: column; /*IE*/
-webkit-box-orient: vertical; /*Safari*/
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.m_col_b_a
{
flex: 1; /*Opera*/
-webkit-flex: 1; /*Chrome*/
-moz-box-flex: 1; /*Firefox*/
-ms-flex: 1; /*IE*/
-webkit-box-flex: 1; /*Safari*/
width: 100%;
}
.m_col_b_b
{
flex: 5; /*Opera*/
-webkit-flex: 5; /*Chrome*/
-moz-box-flex: 5; /*Firefox*/
-ms-flex: 5; /*IE*/
-webkit-box-flex: 5; /*Safari*/
width: 100%;
}
.m_col_b_c
{
flex: 1; /*Opera*/
-webkit-flex: 1; /*Chrome*/
-moz-box-flex: 1; /*Firefox*/
-ms-flex: 1; /*IE*/
-webkit-box-flex: 1; /*Safari*/
width: 100%;
}
<div data-role="view"
id="tabstrip-dealsdetails"
style="display:none;"
data-stretch="true"
data-model="app.dealsdetailsService.viewModel"
data-before-show="app.dealsdetailsService.beforeshow"
data-show="app.dealsdetailsService.show"
data-init="app.dealsdetailsService.init" >
<div class="m_container" style="background-color:tomato;">
<div class="m_col_a" style="background-color:pink;">
header
</div>
<div class="m_col_b" style="background-color:yellow;">
<div class="m_col_b_a" style="background-color:green ">a</div>
<div class="m_col_b_b" style="background-color:blue " >b</div>
<div class="m_col_b_c" style="background-color:Indigo" >c</div>
</div>
</div>
</div>
2 Answers, 1 is accepted
0
David Silveria
Top achievements
Rank 1
Rank 1
answered on 17 Jan 2014, 03:45 PM
I am using responsive design in my apps, so I can confirm it does work, although this is not specific to the Icenium product, rather to the JS framework you're using for your app. In mine I am counting on Kendo Mobile. It handles a lot of the cross platform/device compatibility issues and you can just customize on top of it. Read this blog post about designing an app for tablets and phones. Here is an article on Responsive Design.
In general more info is required in order to troubleshoot any problem e.g. what is the Android device and Android version you test on, have you tried more than one device? Additionally, does it run if you save it as regular html file and open it directly from the Android browser? If not, how do you expect it to work anywhere else?
In general more info is required in order to troubleshoot any problem e.g. what is the Android device and Android version you test on, have you tried more than one device? Additionally, does it run if you save it as regular html file and open it directly from the Android browser? If not, how do you expect it to work anywhere else?
0
Md
Top achievements
Rank 1
Rank 1
answered on 21 Jan 2014, 08:01 PM
Hi , Thanks for your reply . Have you tried my example . Please let me it works in your android device.
Regards
Masud
Regards
Masud