Summary: compatibility of layouts and controls for which andoird/ios-version ?

[Andreas_P_2]

Hi, i use a easy layout:
A Grid-Layout with 4 buttons:

      <div class="uib-grid widget uib_w_23 grid-text grid-height d-margins rest-of-height" data-uib="layout/grid" data-ver="0">
                        <div class="uib-grid-row">
                            <div class="uib-grid-cell widget-container">
                                <a class="button widget uib_w_24" data-uib="app_framework/button" data-ver="1">Help</a>
                     </div>
                       <div class="uib-grid-cell widget-container">
                                <a class="button widget uib_w_25 d-margins gray" data-uib="app_framework/button" data-ver="1">Start</a> 
...
On android 4.4 it looks well (4 Buttons),
but on android 4.1 the button are only small hyperlinks. 

Is there anywhere a summary:
the compatibility of layouts and controls for which andoird/ios-version ?

thanky you,
apak

[Chris_P_Intel]

That grid control uses flexbox.  Flexbox works well in Android 4.4 and later, but not so well before. In Android 4.1 the _older_ flexbox notation is needed. 

As to a summary of compatibility,  caniuse.com is great, but in this case you would have had to look at the base CSS and seen flexbox in there.

http://caniuse.com/#search=flexbox

[Andreas_P_2]

Thank you, but how can i solve this problem ?
Nearly 40% of the androids use the Jelly Bean, ist there alternative compatible CSS 
oder must i edit the css-class uib-grid ?
thank you

[Chris_P_Intel]

The grid CSS is in a less file. Typically, it'll be here:  www/css/index/uib-grid.less      After editing, toggle from Code to  Design mode and the less files will be recompiled.

[Andreas_P_2]

Helo Chris,
i tried to edit this file:  www/css/index/uib-grid.less
but it is not possible.
When i edit the file outside the Intel XDK-IDE in an external editor,
my changes are alwarys overwritten.

Why it is not possible to edit the less-file ?
thanky.

[Chris_P_Intel]

Andreas,

You should be able to edit the .less file. I just tried and had no problems.

After editing it, when you next open the Design view the less files will be recompiled. If you made a mistake in your edits, such that it cannot be compiled, then a dialog will appear asking you if you want to return and edit the file again, or restore the last working version.  If you choose "Restore" then it will restore the last successfully compiling version and that will overwrite your edits.  So don't choose "Restore", instead choose "Return and Edit" and fix the .less file so that it will compile.

Since it is LESS, you can just call less from the command line on the top-level   index_main.less file to make sure that it is compiling correctly.  http://lesscss.org/

One file you cannot edit is the index_main.less.css file. That file is overwritten whenever the .less file is compiled. It has a warning in the top of the document that discourages users from attempting edits to that .css file.

Also, since CSS cascades, another option is to define your own .css file, bind it in _after_ the index_main.less.css file, and put overriding CSS in it. 

Chris