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.

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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With