I haven't found an answer that works for me... Here's my code. My content doesn't scroll. I'm getting my ng-view from a basic template. It's just a bunch of lorem ipsum intended to extend past the end of the page so that I can test this code.
What do I need to do to make my content scrollable? I can't scroll the page at all.
I am running this on a grunt serve dev server. Everything was installed via bower. Ang-material is included properly. Everything looks like it is supposed to, it just doesn't scroll.
(As a side note, my FAB was in it's proper place at the bottom-right last night, I just decided that this is more important so I'm not focusing on it's position right now. It's floating in the middle-right of the page.)
<body ng-app="webApp" layout="column">
<!--[if lte IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<md-toolbar class="md-whiteframe-4dp">
<div class="md-toolbar-tools">
<!-- left side -->
<span flex></span>
<!-- right side -->
<md-button class="md-raised" aria-label="Learn More" ng-href="#/contact">
Contact Me
</md-button>
</div>
</md-toolbar>
<md-content layout="row" flex>
<md-content id="content" flex>
<md-content class="container md-whiteframe-6dp">
<md-content hide show-gt-sm flex layout-padding class="main-text main-view">
<div ng-view></div>
</md-content>
<md-content hide show-sm show-xs flex layout-padding class="main-text">
<div ng-view></div>
</md-content>
</md-content>
</md-content>
<div ng-controller="FabCtrl as fab" class="lock-size" layout-align="end end">
<div class="corner-pad">
<md-fab-speed-dial md-open="fab.isOpen" md-direction="{{fab.selectedDirection}}" ng-class="fab.selectedMode" ng-mouseenter="fab.isOpen=true" ng-mouseleave="fab.isOpen=false" ng-cloak>
<md-fab-trigger>
<md-button aria-label="menu" class="md-fab md-primary md-hue-4 md-whiteframe-4dp" ng-href="tel:9106507122">
<md-tooltip md-direction="left" md-visible="tooltipVisible">Call Me</md-tooltip>
<ng-md-icon icon="phone" size="25"></ng-md-icon>
</md-button>
</md-fab-trigger>
<md-fab-actions>
<md-button aria-label="email" class="md-fab md-raised md-mini md-primary md-whiteframe-4dp" href="mailto:jacobkdick#gmail.com">
<md-tooltip md-direction="left" md-visible="tooltipVisible">Email Me</md-tooltip>
<ng-md-icon icon="email"></ng-md-icon>
</md-button>
<md-button aria-label="phone" class="md-fab md-raised md-mini md-primary md-whiteframe-4dp" href="tel:9106507122">
<md-tooltip md-direction="left" md-visible="tooltipVisible">Follow Me</md-tooltip>
<ng-md-icon icon="twitter"></ng-md-icon>
</md-button>
<md-button aria-label="github" class="md-fab md-raised md-mini md-primary md-whiteframe-4dp" href="https://github.com/jacobkdick" target="_blank">
<md-tooltip md-direction="left" md-visible="tooltipVisible">Fork Me</md-tooltip>
<ng-md-icon icon="github-circle"></ng-md-icon>
</md-button>
</md-fab-actions>
</md-fab-speed-dial>
</div>
</div>
</md-content>
</body>
EDIT: Just applied the overflow scroll tags on my css. Here's a funky result from the bottom-right corner. Both scrollbars are disabled
scrollbars overlay disabled << click here for the picture
Related
I'm trying to create angular material sidenav with list of menu items. When Im running the code on local machine, Each md-list-items takes fullpage width and sidenav have long scroll bar.
But When I run the same code on codepen.io, It displayed correctly.
<section layout="row" ng-controller="AppCtrl">
<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" >
<md-toolbar ng-controller="LeftCtrl">
<div class="md-toolbar-tools">
<h1>Sidenav Right</h1>
<span flex></span>
<md-button class="md-icon-bitton" aria-label="Close Menu" ng-click="close()">
<md-tooltip md-direction="right">Close this menu</md-tooltip>
<md-icon md-font-icon="material-icons">close</md-icon>
</md-button>
</div>
</md-toolbar>
<md-content flex role="navigation">
<md-list>
<md-list-item>
<md-button>First Option</md-button>
</md-list-item>
<md-list-item>
<md-button>First Option</md-button>
</md-list-item>
<md-list-item>
<md-button>First Option</md-button>
</md-list-item>
</md-list>
</md-content>
</md-sidenav>
<md-content flex>
<md-toolbar>
<div class="md-toolbar-tools">
<md-button class="md-icon-button" aria-label="Settings" ng-click="toggleLeft()" ng-hide="isOpenLeft()">
<md-icon md-font-icon="material-icons">menu</md-icon>
</md-button>
<h2>
<span>Application Title</span>
</h2>
</div>
</md-toolbar>
</md-content>
</section>
Here is the codepen:http://codepen.io/nhere/pen/yOwJxE
Try to use the following structure
<md-list>
<md-item>
<md-item-content>
[Content Here]
</md-item-content>
</md-item>
</md-list>
see this angular material demo at http://codepen.io/joyal/pen/mPpGBK
<div ng-controller="AppCtrl" layout="column" style="height:500px;" class="sidenavdemoBasicUsage" ng-app="MyApp">
<md-toolbar layout="column" class="main-toolbar md-medium-tall">
<span flex="flex">
<h1 class="md-toolbar-tools">Good luck overlapping me, sidenavs</h1>
</span>
</md-toolbar>
<section layout="row" flex="">
<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
<md-toolbar class="md-theme-indigo">
<h1 class="md-toolbar-tools">Sidenav Left</h1>
</md-toolbar>
<md-content layout-padding="" ng-controller="LeftCtrl">
<md-button ng-click="close()" class="md-primary" hide-gt-md="">
Close Sidenav Left
</md-button>
<p hide-md="" show-gt-md="">
This sidenav is locked open on your device. To go back to the default behavior, narrow your display.
</p>
</md-content>
</md-sidenav>
<md-content flex="" layout-padding="">
<div layout="column" layout-fill="" layout-align="top center">
<p>
The left sidenav will 'lock open' on a medium (>=960px wide) device.
</p>
<p>
The right sidenav will focus on a specific child element.
</p>
<div>
<md-button ng-click="toggleLeft()" class="md-primary" hide-gt-md="">
Toggle left
</md-button>
</div>
<div>
<md-button ng-click="toggleRight()" class="md-primary">
Toggle right
</md-button>
</div>
</div>
<div flex=""></div>
</md-content>
<div layout="row">
<!--This is new-->
<md-sidenav class="md-sidenav-right md-whiteframe-z2" md-component-id="right">
<md-toolbar class="md-theme-light">
<h1 class="md-toolbar-tools">Sidenav Right</h1>
</md-toolbar>
<md-content ng-controller="RightCtrl" layout-padding="">
<form>
<md-input-container>
<label for="testInput">Test input</label>
<input type="text" id="testInput" ng-model="data" md-sidenav-focus="">
</md-input-container>
</form>
<md-button ng-click="close()" class="md-primary">
Close Sidenav Right
</md-button>
</md-content>
</md-sidenav>
</div>
</section>
</div>
If you open the left side bar, it opens smoothly but if you open the right side bar, while opening and closing, a scroll bar appears on the page (horizontal scroll bar in the main content area).
How can I update the page so that right side bar opens and closes like left side bar (smoothly without scroll bar on content area)
You can use the overflow: hidden in your body, but it may effect to other component(s). Try this:
#sideNavContainer
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
Hope this help.
This is my code.
<body>
<div ng-controller="MainCtrl as mc">
<md-content>
<md-toolbar md-scroll-shrink>
<div class="md-toolbar-tools">
<span flex="5"></span>
<md-button ui-sref="Home">
example.com
</md-button>
<span flex="20"></span>
<span>something something</span>
<span flex="20"></span>
<md-button ng-show="!login" aria-label="Settings" ui-sref="Login">
Login / Register
</md-button>
<md-button ng-show="login" class="md-icon-button" aria-label="Settings" ng-click="openRightMenu()">
<md-icon class="material-icons">menu</md-icon>
</md-button>
<md-sidenav md-component-id="right" class="md-sidenav-right">
<md-button href="http://google.com">Google</md-button>
</md-sidenav>
</div>
</md-toolbar>
</md-content>
<div ui-view></div>
</div>
</body>
When i click on button to open right side nav it opens but height is same as of toolbar.
How to display sidenav of standard size?
put md-sidenav outside md-content
<div ng-controller="MainCtrl as mc">
<md-content>
</md-content>
<md-sidenav md-component-id="right" class="md-sidenav-right">
<md-button href="http://google.com">Google</md-button>
</md-sidenav>
<div ui-view></div>
if it's inside md-toolbar it will take toolbar height
I am new to Material Design using angular. I am using this code from codepen as a guide to learn Angular Material.
What I have noticed is that it is responsive when rendered in the desktop browser using Chrome but behaves like normal html when rendered on an iPhone using iPhone 5's default browser. Does Material have no responsive feature support for Safari?
<div ng-controller="AppCtrl" layout="column" style="height:500px;" class="sidenavdemoBasicUsage" ng-app="MyApp">
<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
<md-toolbar class="md-theme-indigo">
<h1 class="md-toolbar-tools">Sidenav Left</h1>
</md-toolbar>
<md-content layout-padding="" ng-controller="LeftCtrl">
<md-button ng-click="close()" class="md-primary" hide-gt-md="">
Close Sidenav Left
</md-button>
<p hide-md="" show-gt-md="">
This sidenav is locked open on your device. To go back to the default behavior,
narrow your display.
</p>
</md-content>
</md-sidenav>
<md-content flex="" layout-padding="">
<div layout="column" layout-fill="" layout-align="top center">
<p>
The left sidenav will 'lock open' on a medium (>=960px wide) device.
</p>
<p>
The right sidenav will focus on a specific child element.
</p>
<div>
<md-button ng-click="toggleLeft()" class="md-primary" hide-gt-md="">
Toggle left
</md-button>
</div>
<div>
<md-button ng-click="toggleRight()" class="md-primary">
Toggle right
</md-button>
</div>
</div>
<div flex=""></div>
</md-content>
<md-sidenav class="md-sidenav-right md-whiteframe-z2" md-component-id="right">
<md-toolbar class="md-theme-light">
<h1 class="md-toolbar-tools">Sidenav Right</h1>
</md-toolbar>
<md-content ng-controller="RightCtrl" layout-padding="">
<form>
<md-input-container>
<label for="testInput">Test input</label>
<input type="text" id="testInput" ng-model="data" md-sidenav-focus="">
</md-input-container>
</form>
<md-button ng-click="close()" class="md-primary">
Close Sidenav Right
</md-button>
</md-content>
</md-sidenav>
here is the iPhone screenshot
below is the expected behavior screenshot from desktop browser
Have you tried defining the viewport?
Put this tag in the <head>:
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
I've followed the demo as given in the angular material site.
https://material.angularjs.org/latest/#/demo/material.components.menu
I'm facing a problem where the simple dropdown menus and speed dials are just static and not initalized.
Can't seem to figure out what I am missing.
<div layout="column">
<md-content class="md-padding" layout="column">
<div class="lock-size" layout="row" layout-align="center center">
<md-fab-speed-dial md-open="false" md-direction="up"
ng-class="md-fling">
<md-fab-trigger>
<md-button aria-label="menu" class="md-fab md-warn">
<i class="fa fa-car"></i>
</md-button>
</md-fab-trigger>
<md-fab-actions>
<md-button aria-label="twitter" class="md-fab md-raised md-mini">
<i class="fa fa-car"></i>
</md-button>
<md-button aria-label="facebook" class="md-fab md-raised md-mini">
<i class="fa fa-car"></i>
</md-button>
<md-button aria-label="Google hangout" class="md-fab md-raised md-mini">
<i class="fa fa-car"></i>
</md-button>
</md-fab-actions>
</md-fab-speed-dial>
</div>
</md-content>
</div>
I changed the ng-class attribute on the <md-fab-speed-dial> tag to simply class, and it works now. Have a look at this link from the Angular Material site.
In your case, you should have:
<md-fab-speed-dial md-open="false" md-direction="up" class="md-fling">