html - How to either disable scrolling in md-content or have a min-height when on mobile -
i'm using angular material's md-content directives create section flexes fill usable vertical space , scrolls it's content. problem when viewing page small screen, content shrinks point disappears. i'd md-content stop scrolling or have min-height page scrollbar shows , user can still see content.
update: here's plunker demonstrate problem: https://plnkr.co/edit/nvbeho0cpxx5zzi4u88u?p=preview
<body layout="column"> <div> <h1>header</h1> </div> <md-content layout="row"> <div flex="50">left column</div> <md-content flex="50" layout="column"> <h2>section header</h2> <md-content layout="column" flex> <h3>scroll header</h3> <md-content flex layout="column" style="min-height: 300px"> <md-content flex> scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/> scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/> scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/> </md-content> </md-content> </md-content> </md-content> </md-content> </body> if browser window large, scrollable content scrolls expected. when shrink browser, md-content scrollable content shrinks down nothing.
update 2: updated plunker better example. desired section scrollable , have flex bottom of viewport, have of parent elements md-content elements layout attribute. can set min-height on scrollable element, when browser shrunk parent md-content has scroll bar. put min-height on that md-content, require me know height of content (which dynamic).
ideally, when shrinking browser vertically, i'd scrollable content shrink min-height, , change behavior of parent md-content elements not scroll body scroll bar appears.
the example , answer both have 2 javascript errors. angular-material not loaded, since md-content directive cause problems. besides that, don't know how works angular2, there angular2 error in console.
i updated example angular-material-1.0.0/angular-1.4.8 , added module , ngmaterial dependency.
now problem: small screen height comes small screen width, therefor may able use angular-material layout breakpoints. in example use xs/gt-xs breakpoint (599/600px width) switch between layouts applying layout-xs/layout-gt-xs , flex-gt-xs. small devices use column layout , outer md-content thing scrolls. bigger devices use row layout , inner md-content scrolls.
angular.module('app', ['ngmaterial']);<!doctype html> <html> <head> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=robotodraft:300,400,500,700,400italic" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> </head> <body ng-app="app" layout-gt-xs="column"> <md-content flex layout="column"> <div> <h1>header</h1> </div> <md-content flex-gt-xs layout="row" layout-xs="column"> <div flex-gt-xs="50">shrink browser vertically see problem scroll bars. parent md-content scrolls instead of body.</div> <md-content flex-gt-xs="50" layout="column"> <h2>section header</h2> <md-content flex-gt-xs layout="column"> <h3>scroll header</h3> <md-content flex-gt-xs layout="column"> <md-content flex-gt-xs> scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/> scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/> scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/> </md-content> </md-content> </md-content> </md-content> </md-content> </md-content> </body> </html>you might able take better in plunkr, layout stuff hard test in included snippets.
Comments
Post a Comment