Flexbox Showing in the simulator and is not working In android device ...does icenium really support felxbox and responsive design?????

3 posts, 0 answers
  1. Masud
    Masud avatar
    2 posts
    Member since:
    Jan 2014

    Posted 15 Jan 2014 Link to this post


    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. David Silveria
    David Silveria avatar
    234 posts
    Member since:
    May 2006

    Posted 17 Jan 2014 Link to this post

    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?
  3. Masud
    Masud avatar
    2 posts
    Member since:
    Jan 2014

    Posted 21 Jan 2014 Link to this post

    Hi , Thanks for your reply . Have you tried my example . Please let me it works in your android device.
    Regards
    Masud
Back to Top