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>
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 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
I would like to know how to set the width of an element in a column layout in angular material.
Here is a simple code :
<div class="inactive-background" flex layout="column" layout-align="start center">
<md-whiteframe class="md-whiteframe-z2 white-frame" layout-margin>
<md-content layout-align="center center" layout="row">
<span class="chrono">00:00:00</span>
</md-content>
</md-whiteframe>
</div>
With this code, the span is centered but very small :
in order to resize the whiteframe, I can simply change the width property.
<div class="inactive-background" flex layout="column" layout-align="start center">
<md-whiteframe class="md-whiteframe-z2 white-frame" layout-margin style="width: 600px">
<md-content layout-align="center center" layout="row">
<span class="chrono">00:00:00</span>
</md-content>
</md-whiteframe>
</div>
The result is good, but the problem is that the whiteframe becomes no responsive. If I reduce the size of the browser, the whiteframe still takes 600px width.
The question is : How to do that in the responsive way ?
Thanks you
Codepen
I finally found (but not sure it is the best solution). Tell me if not
The trick is to wrap the whiteframe into an other div (layout=row) and use flex to set the size :
http://codepen.io/anon/pen/NGgQjX?editors=110
<div class="inactive-background" flex layout="column">
<div flex layout="row" layout-align="center start">
<md-whiteframe class="md-whiteframe-z2 white-frame" layout-margin flex="70">
<md-content layout-align="center center" layout="row">
<span class="chrono">00:00:00</span>
</md-content>
</md-whiteframe>
</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;
}