I have more than one image in a row. And I need to handle that with horizontal scrollbar. Is that possible in angular material. I have tried the code as below. But images were placed one above the other.
<md-content layout="row" layout-align="start center" md-scroll-x>
<a href="" ng-repeat="item in items">
<img ng-src="{{item.src}}" class="md-card-image radius">
</a>
</md-content>
Here is my code and it works as expected i don't see any issues in your snippet.
<md-content layout="row" layout-align="start center" md-scroll-x>
<a href="" ng-repeat="item in items">
<img ng-src="{{item}}" class="md-card-image radius">
</a>
</md-content>
working code here
Hope this helps!
Related
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.
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;
}