I have a div of a set height. I am setting that div up with a column in google material and then adding rows of content.
My problem is this :
If I do not set the container div to have a fixed height, then the div is not scrollable - the overflow content is simply not shown.
If I set the container to a fixed height, then the rows are pushed together to fit into that space and the formatting is lost.
This seems like something that should be extremely simple to do. I see answers that say you should embed md-content elements which I have in the code below. This is frowned upon by the material docs and understandably so. Any help is appreciated.
<md-content>
<md-content>
<div layout="column" flex="100">
<div layout="row" flex="100" layout-margin >
row content
</div>
<div layout="row" flex="100" layout-margin >
row content
</div>
<div layout="row" flex="100" layout-margin >
row content
</div>
</div>
</md-content>
</md-content>
You just need to set flex="none" for the inner divs - CodePen
From the docs
Markup
<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
<md-content>
Scrolling:
<md-content>
<div layout="column" style="height:50px; background:yellow; overflow:auto">
<div layout="row" flex="none" layout-margin style="color:red">
row content
</div>
<div layout="row" flex="none" layout-margin style="color:blue">
row content
</div>
<div layout="row" flex="none" layout-margin style="color:green">
row content
</div>
</div>
</md-content>
<br>
Basic:
<md-content>
<div layout="column">
<div layout="row" flex="100" layout-margin style="color:red">
row content
</div>
<div layout="row" flex="100" layout-margin style="color:blue">
row content
</div>
<div layout="row" flex="100" layout-margin style="color:green">
row content
</div>
</div>
</md-content>
</md-content>
</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 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>
When I use md-sidenav without having md-toolbar, everything is OK. Means that, opening sidnav will perform correctly like image below.
But when I add a toolbar before a sidenav or before the section containing sidenav, Upon opening the sidenav the page will find scroll and sidenav will not fill the entire page's height(image below), while it should be the same as before.
toolbar height size will add to the height of page.
complete code at plnkr
here is the main part of the code:
<div ng-controller="AppCtrl" layout="column" layout-fill>
<md-toolbar>
<div class="md-toolbar-tools" layout="row" style="background-color:crimson">
...
</div>
</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-sidenav>
<md-content flex layout-padding>
...
</md-content>
<md-sidenav class="md-sidenav-right md-whiteframe-z2" md-component-id="right">
...
</md-sidenav>
</section>
</div>
I solved the problem with using different layout of page.
Using md-sidenav before md-toolbar:
<div layout="row">
<md-sidenav>
</md-sidenav>
<div layout="column">
<md-toolbar>
</md-toolbar>
<md-content>
</md-content>
</div>
</div>
I want to use Angular Material's md-list for showing elements, using responsive design. And my task is to show these items in 1 column if media device is small and in 3 columns if it's larger than small.
I was thinkink of something like this:
<md-list layout="row" layout-wrap>
<md-list-item flex="33" flex-sm="100" class="md-2-line" ng-repeat="item in items">
<div class="md-list-item-text">
<h3>{{occasionType.occasionType}}</h3>
<p>{{occasionType.name}}</p>
</div>
</md-list-item>
</md-list>
But it doesn't work. Can someone help?
Try using layout-sm="column"
<div layout="row" layout-wrap layout-sm="column">
<div flex="33" class="md-2-line" ng-repeat="item in items">
<div class="md-list-item-text">
<h3>{{occasionType.occasionType}}</h3>
<p>{{occasionType.name}}</p>
</div>
</div>
</div>
It works for me.
1) I am trying to stretch the children divs to 60% and align it in the center but it is not working. I am using flex to stretch the size of the div to 60%. See example http://plnkr.co/edit/eaLjJDbjL1KnOI4jLYyO?p=preview
<div layout="column" layout-align="center">
<div style="background-color:#00A000;height: 40px;" flex="60">
</div>
<div style="background-color:#004444;height: 40px;" flex="60">
</div>
<div style="background-color:#0077b3;height: 40px;" flex="60">
</div>
2) In Angularjs Material document it is mentioned that "to customize the size and position of elements in a layout, use flex, offset, and flex-order attributes", I don't see an example of offset.
This is what you need to do..
<div layout="column" layout-align="center">
<div layout="row" layout-align="center center">
<div style="background-color:#00A000;height: 40px;" flex="60">
</div>
</div>
<div layout="row" layout-align="center center">
<div style="background-color:#004444;height: 40px;" flex="60">
</div>
</div>
<div layout="row" layout-align="center center">
<div style="background-color:#0077b3;height: 40px;" flex="60">
</div>
</div>
</div>
Read more about layout here
+1 for nitins answer. It really helped me with my issue. Here is the plunker showing his answer in a different way using angular material cards.
The html:
<section class="content-section gridListdemoBasicUsage">
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<h1 class="text-center">The Different Ways SharePoint can help define your business</h1>
<!-- Separator -->
<md-divider ng-style="{'background': 'rgba(255, 102, 51, 0.7)'}"></md-divider>
</div>
</div>
<div layout="row" layout-align="center" data-ng-style="{'width': '100%'}">
<div class='md-padding' layout="row" layout-align="center" layout-wrap>
<md-card class="md-whiteframe-9dp" data-ng-style="{'width': '350px', 'border-radius': '6px'}" data-ng-repeat="card in spcVM.serviceCards" layout-padding>
<a data-ng-if="card.imagePath" ui-sref="{{card.link}}"><img layout-fill src="{{card.imagePath}}" class="img-rounded" alt="{{card.imageAlt}}" /></a>
<md-card-content>
<div>
<h4>{{card.title}}</h4>
<md-divider ng-style="{'background': 'rgba(255, 102, 51, 0.7)'}"></md-divider>
<br />
<p>{{card.mainContent}}</p>
</div>
</md-card-content>
<md-card-footer>
<div class="md-actions" layout="row" layout-align="center end">
<md-button ng-click="card.action($event)">View</md-button>
</div>
</md-card-footer>
</md-card>
</div>
</div>
</section>
The above is in a container-fluid div.