I am trying to get a fixed right sidebar using angular material along with a fixed toolbar on the top. I seem to be missing something due to which it doesnt seem to work at all. I have tried to make a pen out of it, please let me know how to fix it.
Following is my md-content code
<md-content flex class='md-padding' layout="column">
<md-card ng-repeat = "card in cards">
{{card.title}}
{{card.text}}
</md-card>
<md-sidenav flex md-component-id="right" md-is-locked-open="true" class="md-sidenav-right md-whiteframe-z2">
<md-content layout="column">
<div flex>
<md-button href="http://google.com"> Button </md-button>
</div>
<div flex>
<md-button href="http://google.com"> Button </md-button>
</div>
</md-content>
</md-sidenav>
</md-content>
`
http://codepen.io/viggy_prabhu/pen/xVvQzr
Try something like this. I set the sidenav and the content to be in layout row. Removed the flex attribute from the md-sidenav and instead distributed it into a 1/3 and 2/3 layout [flex="33" and flex="66"].
<md-content layout="row">
<md-sidenav md-component-id="right" md-is-locked-open="true" class="md-sidenav-right md-whiteframe-z2" flex="33">
<md-content layout="column">
<div flex>
<md-button href="http://google.com"> Button </md-button>
</div>
<div flex>
<md-button href="http://google.com"> Button </md-button>
</div>
<div flex>
<md-button href="http://google.com"> Button </md-button>
</div>
<div flex>
<md-button href="http://google.com"> Button </md-button>
</div>
</md-content>
</md-sidenav>
<md-content flex="66">
<md-card ng-repeat="card in cards">
{{card.title}} {{card.text}}
</md-card>
</md-content>
</md-content>
<body ng-app="materialApp">
<div ng-controller="AppCtrl" layout='column' layout-fill>
<md-toolbar class='md-medium-tall'>
<div class="md-toolbar-tools">
<span>Fixed to Top</span>
<span flex></span>
</div>
</md-toolbar>
<md-content class='md-padding' layout="row">
<div layout="column" flex>
<md-card ng-repeat="card in cards">
{{card.title}} {{card.text}}
</md-card>
</div>
<md-sidenav flex=20 md-component-id="right" md-is-locked-open="true" class="md-sidenav-right md-whiteframe-z2" layout-fill>
<md-content style="padding-top:5%; height: 200px" layout="column">
<div flex>
<md-button href="http://google.com"> Button </md-button>
</div>
<div flex>
<md-button href="http://google.com"> Button </md-button>
</div>
<div flex>
<md-button href="http://google.com"> Button </md-button>
</div>
<div flex>
<md-button href="http://google.com"> Button </md-button>
</div>
</md-content>
</md-sidenav>
</md-content>
</div>
</body>
Added a div around the md-card repeat and placed the md-sidenav next to it.
Also removed the layout from the body tag. This allows the side-nav to flex to the bottom of the page.
you can try using $mdSticky service from angular material
(function() {
angular.module('example', ['ngMaterial']);
})();
(function() {
angular.module('example').directive('sticky', Sticky);
Sticky.$inject = [ '$mdSticky' ];
function Sticky($mdSticky) {
return {
restrict : 'A',
link : function(scope, element) {
$mdSticky(scope, element);
}
}
}
})();
codepen example https://codepen.io/mckenzielong/pen/LpyYME
tutorial can be found here:
https://www.coditty.com/code/angular-material-how-to-make-custom-elements-sticky-using-mdsticky
Related
I'm building a site with AngularJs Material sidenav.
I'd like both md-sidenav and md-content to be as 1 page, without having scrollers appear when the content of one of the elements has more height than the other. How can this be achieved? Here's the HTML:
<div class="content" layout="column" style="height: 100%;">
<section layout="row" flex>
<md-sidenav
class="md-sidenav-left"
md-component-id="left"
md-is-locked-open="$mdMedia('gt-md')"
md-whiteframe="4">
<md-toolbar class="md-theme-indigo">
<h1 class="md-toolbar-tools">Sidenav Left</h1>
</md-toolbar>
<md-content layout-padding ng-controller="LeftCtrl">
<p hide show-gt-md>
<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
</p>
</md-content>
</md-sidenav>
<md-content flex layout-padding style="overflow: unset;">
<div layout="column" layout-align="top center" style="height: 100%;">
<p>The left sidenav will 'lock open' on a medium (>=960px wide) device.</p>
<div>
<md-button ng-click="toggleLeft()"
class="md-primary" hide-gt-md>
Toggle left
</md-button>
</div>
</div>
<div flex></div>
</md-content>
</section>
</div> <!-- end .content -->
You can use position property.
sidenav > md-sidenav, sidenav > md-backdrop {
position: fixed !important;
}
I'm trying to make a vertical icon toolbar. I want it to be on the right top side. It shall only occupy the width of the icon (24px and some padding).
I tried this
<div layout="column" layout-align="top end">
<md-button class="md-icon-button" aria-label="close">
<md-icon md-font-icon="zmdi zmdi-close"></md-icon>
</md-button>
<md-button class="md-icon-button" aria-label="Favorite">
<md-icon md-font-icon="fa fa-print"></md-icon>
</md-button>
<md-button class="md-icon-button" aria-label="close">
<md-icon md-font-icon="fa fa-print"></md-icon>
</md-button>
</div>
Any smart way to achive this with angular material directives? Or must I do it manually with css?
Here you go - CodePen
I did the original for this example (which was on the left hand side) for another question which I can't find for the moment. I've answered again to help yourself and others.
Markup
<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill layout="column">
<md-content flex layout="row">
<div flex>
Your content
</div>
<div layout="column">
<md-whiteframe id="vericalToolBar" class="md-whiteframe-8dp" layout="column" layout-align="start center" flex>
<md-button class="md-icon-button" aria-label="More">
<md-icon md-svg-icon="img/icons/more_vert.svg"></md-icon>
</md-button>
<md-button class="md-icon-button" aria-label="Favorite">
<md-icon md-svg-icon="img/icons/favorite.svg"></md-icon>
</md-button>
<p id="toolBarTitle" class="md-title">My vertical toolbar</p>
<span flex></span>
<md-button class="md-icon-button" aria-label="Favorite">
<md-icon md-svg-icon="img/icons/cake.svg"></md-icon>
</md-button>
</md-whiteframe>
</div>
</md-content>
</div>
CSS
#vericalToolBar {
background-color: rgb(1,74,182);
width: 40px;
}
#vericalToolBar md-icon {
color: rgba(255,255,255,0.87);
}
#toolBarTitle {
writing-mode: tb-rl;
color: rgba(255,255,255,0.87);
}
I build my first app with the material framework: http://thommessen.upperyard.de/ When you switch the website to mobile view, and open the RIGHT Sidebar, then you will see that he bugs in the height of the site... the left sidebar dont bug, but its exactly the same code, i kust change the id to right and the class to right. can anyone tell me how this can be?
Here the code:
<div ui-view="header">
<md-toolbar layout="row">
<div class="md-toolbar-tools">
<md-button ng-click="toggleSidenav('left')" hide-gt-sm class="md-icon-button">
<md-icon aria-label="Menu" md-svg-icon="images/icons/menu.svg"></md-icon>
</md-button>
<h1>Hello World</h1>
<span flex></span>
<md-button ng-click="toggleSidenav('right')" hide-gt-sm class="md-icon-button">
<md-icon aria-label="Menu" md-svg-icon="images/icons/student.svg"></md-icon>
</md-button>
</div>
</md-toolbar>
</div>
<div layout="row" flex>
<div ui-view="sidebar-left">
<md-sidenav layout="column"
class="md-sidenav-left md-whiteframe-z2"
md-component-id="left"
md-is-locked-open="$mdMedia('gt-sm')">
asdsd
</md-sidenav>
</div>
<div layout="column" flex id="content">
<md-content layout="column" flex class="md-padding">
<div ui-view="container"></div>
</md-content>
</div>
<div ui-view="sidebar-right">
<md-sidenav layout="column"
class="md-sidenav-right md-whiteframe-z2"
md-component-id="right"
md-is-locked-open="$mdMedia('gt-sm')">
asdsd
</md-sidenav>
</div>
</div>
I want to build a nav menu. I want it to be tall, and I want to split it horizontally in two. Then I want the left part to have something aligned to the bottom of the menu. The right part should have the nav links and be middle-aligned. I want to use as less css as possible. (I am also working with Angular Material and Bootstrap if that helps). Here is the plunkr. I have already checked out this checkit but I am looking for another option.
<div class="menu container-fluid">
<md-toolbar class="md-tall">
<div class="container">
<div layout="row">
<!--Left-->
<div layout="row">
<md-button aria-label="Settings" class="shownSm">
<ng-md-icon icon="menu" ng-click="main.small =!main.small" style="fill: #fefefe;"></ng-md-icon>
</md-button>
<div layout="column">
<span flex></span>
<span>
<small>Some name</small>
</span>
<span>
<small>Something else</small>
</span>
</div>
</div>
<span flex=""></span>
<!--Right-->
<div class="right" layout="column">
<span flex=""></span>
<div layout="row" class="hiddenSm">
<ul class="text-center">
<span>Item1</span>
<span>Item2</span>
<span>Item3</span>
</ul>
</div>
</div>
</div>
</div>
</md-toolbar>
</div>
Without tinkering too much with my own CSS, Is there an attribute or configuration I can use to left align the text in a md-button that is stretched a bit to fit a menu for example?
This is my current view
<md-sidenav md-is-locked-open="$mdMedia('gt-md')" layout="column">
<md-toolbar>
<h1 class="md-toolbar-tools">
<a ng-href="/" layout="row" href="/">
<div class="docs-logotype">Material Design</div>
</a>
</h1>
</md-toolbar>
<md-content flex role="navigation" layout="column">
<md-button>Button1</md-button>
<md-button>Button2</md-button>
</md-content>
</md-sidenav>
<md-content flex layout="column">
<md-toolbar>
<div class="md-toolbar-tools">
<button class="md-icon-button md-button" aria-label="Settings">
<md-icon md-svg-icon="images/icons/menu.svg" aria-hidden="true"></md-icon>
<div class="md-ripple-container"></div>
</button>
<md-button>Button1</md-button> <!-- how to left align this text inside a stretched button -->
<md-button>Button2</md-button>
<span flex=""></span>
<md-button>Right side button</md-button>
<button class="md-icon-button md-button" aria-label="More">
<md-icon md-svg-icon="images/icons/more_vert.svg" aria-hidden="true"></md-icon>
<div class="md-ripple-container"></div>
</button>
</div>
</md-toolbar>
<md-content flex>
Some content !!
</md-content>
</md-content>
Use empty <span> tag with a flex attribute, as shown below. You can even specify a value to the flex attribute to get a more specific location.
<div layout="row" layout-align="start center" flex>
<md-button>button 1 </md-button>
<span flex></span>
</div>
If you just want to align text inside a button, try setting the style attribute like this:
<md-button style="text-align:left">button </md-button>
You can do this if using within md-toolbar(Angular 4) Angular 6+:
Html
<mat-toolbar id="toolbar" color="primary" >
<mat-button>button 1 </mat-button>
<span class="spacing"></span>
<mat-button>button 2 </mat-button>
</mat-toolbar>
OR
<mat-toolbar id="toolbar" color="primary">
<mat-button>button 1 </mat-button>
<span style="flex: 1 1 auto;"></span>
<mat-button>button 2 </mat-button>
</mat-toolbar>
Your CSS if no styling in HTML:
.spacing {
flex: 1 1 auto;
}
Hope this helps someone.
in VueJS (nuxt-vue-material)
.md-button .md-ripple {
justify-content: unset;
}