css - Angular material design behaves weird on certain mobile browsers -
i have following angular-md code. want divs flex in row on desktops , in column view on mobile devices. works on mobile browsers (standard browser , safari 1 tested) columns height way big , doesn't adjust content. seems 3 gettng big biggest div holds content if have fewer 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"> <!-- should next eachother on desktop , under eachother on mobile --> <div flex="20" flex-sm="100" layout-align="start center" layout-align-sm="center center" layout="column"> <!-- should next eachother on desktop , under eachother on mobile --> </div> <div flex="40" flex-sm="100" layout-align="center start" layout="row"> <!-- should next eachother on desktop , under eachother on mobile --> </div> </md-content>
Comments
Post a Comment