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>
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 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>
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.
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;
}