I want my buttons showing left- and right arrow and NOW text to be as small as possible. How do I do that?
<div ng-controller="DateCtrl" layout="row" flex>
<md-datepicker ng-model="activeDate" md-placeholder="Enter date" ng-change="changeDate()"></md-datepicker>
<div>
<md-button class="md-raised" ng-click="prev()"><</md-button>
<md-button class="md-raised" ng-click="changeToday()">NOW</md-button>
<md-button class="md-raised" ng-click="next()">></md-button>
</div>
</div>
With the current solution the buttons will be arranged as if they were in a layout="column"
, that is vertically.
Before I dig into this CSS-style, I just wanted to check if there is a preferred Angular-Material way of doing this?
Add the following to your styles:
.md-button {
min-width: 1%;
}
Alternatively, use a custom class:
.md-button.md-small {
min-width: 1%;
}
Or, in Angular Material 2:
.mat-button.mat-small {
min-width: 1%;
}