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





All Articles