Angular material design behaves strangely in some mobile browsers
I have the following Angular-MD code. I want divs to fold in a row on desktops and columnar on mobile. This works, but in some mobile browsers (standard browser and safari that I tested). Column heights are large and not suitable for content. It looks like they are all 3 gettngs the size of the largest div that contains content, even if they have less content.
<section class="md-whiteframe-z0 sect" flex="50" flex-sm="90" flex-md="80">
<md-toolbar class="tool2" layout-padding>
<div class="md-toolbar-tools">
<h4>
<!-- Toolbar text -->
</h4>
</div>
</md-toolbar>
<md-content class="md-default-theme" layout-padding layout="row" layout-sm="column" layout-wrap>
<div flex="40" flex-sm="100" layout-align="center start" layout="row">
<!-- This should be next to eachother on desktop and under eachother on mobile -->
<div flex="20" flex-sm="100" layout-align="start center" layout-align-sm="center center" layout="column">
<!-- This should be next to eachother on desktop and under eachother on mobile -->
</div>
<div flex="40" flex-sm="100" layout-align="center start" layout="row">
<!-- This should be next to eachother on desktop and under eachother on mobile -->
</div>
</md-content>
+3
source to share
No one has answered this question yet
Check out similar questions: