Wikitude

Flexbox

Hi Beautiful People,

Please this is really a biginners question, I'm making a leap into android development with AR and thanks to Wikitude its going to be fun. 

Please I'm trying to use Flexbox in my CSS, without success. I had the impression that the Architect browser would accept any of this, tried it on chrome on my dev pc with success:

display: flex;               

display: -webkit-box;     

display: -moz-box;

display: -webkit-flex;       

 

tried them inside my container tag and header like this, one after the other without any success on the actual device: Samsung galaxy S4

.container{

display: flex;

flex-wrap: wrap;

}

 

.header{

display:flex;

}

-----no success

next I tried:

 

.container{

display: -webkit-box;

-webkit-box-wrap: wrap;

}

 

.header{

display:-webkit-box;

}

 

--no success

 

i have a viewport like this: <meta name="viewport" content="width=device-width,initial-scale=1">

 

and so on for the rest, but none works as the divs in the header are all stacked upon each other.

 

Please could someone help point me in the right direction, what I'm doing wrongly.

 

Many Thanks,

 

Ben

Hi Ben!
 

As a best practive start developing the UI with remote debugging assistance

E.g. for Android


Take Chrome-Browser and set-up remote debugging.

Take a sample application that is similar to what you want to achieve and customize it directly in the sample application (part of the SDK bundle).

Modify the html/css/js code so it fits your needs and use desktop remote webview debugging to find JS errors and inspect your HTML elements

Once it looks good on your test-device also check out behaviour on Android devices prior to Android 4.4 as WebView implementation ran through some mayor changes - find out more.

Also check out known issues of your used frameworks for those old browsers and note the difference between running "stock browser" on and Android device and running Chrome on the exact same device - Only the stock-browser uses the (old) Android System WebView on these devices, whereat Chrome has Chromium browser under the hood.


Best regards,
Andreas

 

Hi Andreas,

Thanks for the pointer, I have through that learnt that Android devices below 4,4 have an old default browser installed, something called Stock browser, which behaves differently. I have to factor in lagacy browser support. Working on it.

Thanks,

Ben