Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS Flex support for Android WebView and iOS UIWebView

Based on my previous question here. I am trying to use the CSS Flex feature to justify multi rows toolbar buttons to fill entire rows width, it works on most browsers except android WebView and iOS UIWevView where I uses those inside my Mobile App.

Here is the current code I am using.

<div class="btn-toolbar text-center" role="toolbar">
  <a href="#" class="btn btn-success">Link 1</a>
  <a href="#" class="btn btn-success">Link 11</a>
  <a href="#" class="btn btn-success">Link 111</a>
  <a href="#" class="btn btn-success">Link 1111</a>
  <a href="#" class="btn btn-success">Link 11111</a>
  <a href="#" class="btn btn-success">Link 111111</a>
  <a href="#" class="btn btn-success">Link 11111</a>
  <a href="#" class="btn btn-success">Link 1111</a>
  <a href="#" class="btn btn-success">Link 111</a>
  <a href="#" class="btn btn-success">Link 111</a>
  <a href="#" class="btn btn-success">Link 11</a>
  <a href="#" class="btn btn-success">Link 111</a>
  <a href="#" class="btn btn-success">Link 1111111</a>
  <a href="#" class="btn btn-success">Link 111111111</a>
  <a href="#" class="btn btn-success">Link 111</a>
  <a href="#" class="btn btn-success">Link 11111</a>
  <a href="#" class="btn btn-success">Link 11</a>
  <a href="#" class="btn btn-success">Link 11111111111</a>
  <a href="#" class="btn btn-success">Link 11111</a>
  <a href="#" class="btn btn-success">Link 1</a>
</div>

and here is the CSS I am using:

.btn-toolbar{
    display: flex;
    flex-wrap: wrap;
}
.btn-toolbar .btn{
    flex: 1;
}

So is there any Fix for this on Android and iOS Web Views.

enter image description here

like image 957
daliaessam Avatar asked Apr 24 '26 08:04

daliaessam


1 Answers

I paid someone to solve it, here is the solution for all browsers and operating systems.

.btn-toolbar{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
} 
.btn-toolbar .btn{
    -webkit-box-flex-grow: 1;
    -moz-box-flex-grow: 1;
    -webkit-flex-grow: 1;
    -ms-flex-grow: 1;
    flex-grow: 1;
}
like image 106
daliaessam Avatar answered Apr 25 '26 23:04

daliaessam