I have a simple toolbar with two components: an h1 and a menu button. I would like the h1 centered in the toolbar and the menu button on the left. after playing around with the material design attributes I still cannot achieve my end goal. do I need to write custom css? here is my index html as of now
<md-toolbar layout="row" layout-align='start center'>
<md-button class="md-icon-button md-primary" aria-label="Settings" flex='10'>
<i class='material-icons md-36 md-light'>menu</i>
</md-button>
<h1 class='title' flex='90'>MusiComp</h1>
</md-toolbar>
You can play around with <div class="mdl-layout-spacer"></div>. Try adding this right before your <h1 class='title' flex='90'>MusiComp</h1>
Related
I am simply trying to get my main view pages to scroll but can not seem to achieve this without setting the height of the div to a specific amount, even whilst using md-content.
The container div that I am using to place all the views is nested two levels deep using ui-view.
The root state is as follows:
<md-toolbar layout="row" layout-align="center center">
<h3>Site Title</h3>
</md-toolbar>
<div layout="column" flex id="content" ui-view></div>
Then the next view is used to display a toolbar and a sidenav that is present across all child states/views:
<div layout="row" flex>
<md-sidenav>
<md-list layout="column" flex>
//SCROLLABLE SIDENAV WORKS PERFECTLY
//NAVIGATION ITEMS LIVE HERE
</md-list>
</md-sidenav>
<div layout="column" flex>
<md-toolbar layout="row" layout-align="center center">
<h2>Subheading</h2>
</md-toolbar>
<div class="md-padding" ui-view flex>
//THIS IS WHERE THE CHILD VIEWS GO
</div>
</div>
I have tried adding a class to both this final ui-view and also to a div but can only achieve scrolling with a specific height (which obviously doesn't work across devices) and by changing the position which causes problems given that there are two toolbars above it (and also with FAB's that float on top).
md-content doesn't work properly, I'm not sure why something so simple is so difficult in this situation. I am redesigning my webapp which has always used Bootstrap so please forgive my lack of CSS skills as it was already layed out when I received it.
Thank you for your help.
The Parent class which contains the following code must have layout="column" and use md-content wherever you use ui-view.
<md-toolbar layout="row" layout-align="center center">
<h3>Site Title</h3>
</md-toolbar>
<md-content layout="column" flex id="content" ui-view>
</md-content>
Similarly you should use md-content in following child elements to get the desired result.
Here is the Codepen.
http://codepen.io/anon/pen/ggRQqR
I am trying to add tooltips to my buttons which are inside a fab toolbar.
However, the tooltips are overlapping each other & i am not getting the functionality as expected.
The tooltips should only show when I am hovering over the exact button.
I have added two screen shots which show the wierd behavior.
<div ng-controller="AppCtrl" ng-cloak="" class="tooltipdemoBasicUsage" ng-app="MyApp">
<md-fab-toolbar class="md-fab md-accent md-fab-bottom-right">
<md-fab-trigger class="align-with-text">
<md-button aria-label="menu" class="md-fab md-primary">
<md-icon md-svg-src="img/icons/ic_insert_drive_file_24px.svg"></md-icon>
<md-tooltip>Options</md-tooltip>
</md-button>
</md-fab-trigger>
<md-toolbar>
<md-fab-actions class="md-toolbar-tools">
<md-button aria-label="Save" class="md-icon-button" ng-click="vm.update()" ng-disabled="vm.loading || vm.data.length==0" >
<md-icon md-svg-src="img/icons/ic_photo_24px.svg" style="width: 24px; height: 24px;"></md-icon>
<md-tooltip>Save</md-tooltip>
</md-button>
<md-button aria-label="Reset" class="md-icon-button" >
<md-icon md-svg-src="img/icons/ic_photo_24px.svg" style="width: 24px; height: 24px; "></md-icon> <md-tooltip>Refresh</md-tooltip>
</md-button>
</md-fab-actions>
</md-toolbar>
</md-fab-toolbar>
</div>
I have a way to fix it. But it is not perfect solution. After checking the Angular-Material's code I found that their tooltip gets initialised based on parent's pointer-events css properties, which makes sure the parent has pointer events and not set to none.
I was having the same problem, So I fixed it by adding pointer events to the menu's icon and removing it after the page has loaded.
CodePen Link
Steps to fix:
1) Add this css code into your css file (Make sure it override existing css)
md-fab-toolbar md-toolbar.pevents__initial {
pointer-events: initial;
}
2) Add pevents__initial class to the md-toolbar element, which is inside md-fab-toolbar:
<md-toolbar class='pevents__initial'>
<md-fab-actions class="md-toolbar-tools">
</md-fab-actions>
</md-toolbar>
3) Add this javascript code to remove pevents__initial class from above html (Other wise your menu will not work):
setTimeout(function() {
$('.pevents__initial').removeClass('pevents__initial');
}, 1000);
This is just a hack to make tooltip work inside fab toolbar. Need to read the official code more to find more better solution. But this works for me right now.
I'm trying to use material2 sidenav component. I want it to be separate from content. Just a full-height sidebar that slides there and back - without any sidenav-layout as it creates some unwanted things in my app layout.
What I want looks really close to https://inbox.google.com/u/0/?pli=1 sidenav.
What I currently have is:
If you want to separate side bar and main content, Use the bootstrap column classes to achieve as below,
<md-sidenav-container class="container-fluid">
<div class="col-md-1">
<button md-button (click)="sidenav.open()">
<i class="fa fa-list"></i>
</button>
</div>
<div class="col-md-11">
Main content goes here
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<md-sidenav #sidenav class="example-sidenav">
Manu bar
</md-sidenav>
</md-sidenav-container>
Note:Break tags are added to increase the height of the content.
LIVE DEMO
I need to open a modal on button click for which i am using angular material.
where i need two buttons at the bottom of a dialog towards right .
I used layout with flex which is not working as required.
Html:
<md-dialog ng-cloak class="promptIncludeExclude-options">
<md-toolbar class="promptIncludeExclude-header">
<div class="md-toolbar-tools">
<span class="title">Product Inclusion Notification</span>
<span flex></span>
<md-button class="md-icon-button" ng-click="dialogController.closeDialog()">
<span class="close-dialog">✕</span>
</md-button>
</div>
</md-toolbar>
<md-dialog-content>
</md-dialog-content>
<md-dialog-actions layout="row">
<div flex="25" flex-offset="25"><md-button ng-click="dialogController.closeDialog()" >Proceed</md-button></div>
<div flex="50" flex-offset="20" ><md-button ng-click="dialogController.closeDialog()">Cancel</md-button></div>
</md-dialog-actions>
That's a simple layout configuration. Use the layout classes to align the content as you want:
<md-dialog-actions class="layout-row layout-align-end-end">
<md-button ng-click="dialogController.closeDialog()">Proceed</md-button>
<md-button ng-click="dialogController.closeDialog()">Cancel</md-button>
</md-dialog-actions>
It's not necessary wrapping the buttons inside divs and giving them flex width and offset, and for sure this is what is messing things...
According to Angular Material's documentation on alignment:
The layout-align attribute takes two words. The first word says how
the children will be aligned in the layout's direction, and the second
word says how the children will be aligned perpendicular to the
layout's direction.
I used this to create the button section that you can see on the picture below:
With the following code:
<section layout="row" layout-sm="column" layout-align="end center" layout-wrap>
<md-button class="md-primary">Submit</md-button>
<md-button class="md-warn">Cancel</md-button>
<md-button class="md-warn">Delete Boundary Partner Type</md-button>
</section>
However, I wanted the Submit button to be left-aligned, and all the others right-aligned. Is there a correct way of doing this with Angular Material or will I just have to create my own styles?
You can do so with the help of a div and layout-align , here is the code:
<section layout="row" layout-sm="column" layout-align="end center" layout-wrap>
<div layout="row" layout-align="start center" flex>
<md-button class="md-primary">Submit</md-button>
<span flex></span>
</div>
<md-button class="md-warn">Cancel</md-button>
<md-button class="md-warn">Delete Boundary Partner Type</md-button>
</section>
And a working Plunker.
You can also use
layout-align="space-between center"
See this exemple : https://material.angularjs.org/latest/demo/panel
(Last exemple)
"space-between center" works with Angular V5 and angular/flex-layout.
You will have to use it as: fxLayoutAlign = "space-between center".
This works with the most recent Angular.
If you want to align more than one button to left or right, you can simply group buttons with div.
For example, when you place Prev and Next button to left and close button to right,
<section fxLayout fxLayoutAlign="space-between center">
<div>
<button mat-button>Prev</button>
<button mat-button>Nex</button>
</div>
<button mat-button cdkFocusInitial mat-dialog-close>Close</button>
</section>
The documentation for Toolbar shows a simple solution:
<mat-toolbar>
<button mat-icon-button><mat-icon>menu</mat-icon></button> <-- left
<span class="example-spacer"></ <-- space in the middle
<button mat-icon-button><mat-icon>favorite</mat-icon></button> <-- right
<button mat-icon-button><mat-icon>share</mat-icon></button> <-- right
</mat-toolbar>
This puts the "hamburger menu" icon on the left and the heart ("favorite") and share icons on the right. The key is this little beauty:
<span class="example-spacer"></span>
with this CSS:
.example-spacer {
flex: 1 1 auto;
}
The first parameter is a maximum amount of space, the second is the minimum, and the third is the ideal. auto means "fill up the space".
flex: 0 1 auto and flex: none make zero space, i.e., the heart and share icons go right.
You can even put one icon on the left, one in the middle, and one on the right:
<mat-toolbar>
<button mat-icon-button><mat-icon>menu</mat-icon></button> <-- left
<span class="example-spacer"></span> <-- space
<button mat-icon-button><mat-icon>favorite</mat-icon></button> <-- middle
<span class="example-spacer"></span> <-- space
<button mat-icon-button><mat-icon>share</mat-icon></button> <-- right
</mat-toolbar>