angularjsng-animateangularjs-materialangularjs-ng-include

md-button position alignment in the form

I'm using ng-include to call my form "test_form", upon display buttons align at the center. How can I align them at the bottom right of the form?

index.html

<div class="col-sm-6 sidenav">
  <!-- menu bar content at the top -->
<div class="column-nav-form" ng-include = "'/views/html/test_form.html'" >
</div>

test_form.html

<form name="testForm" ng-app="myApp" ng-controller="FormController" class="container-fluid" ng-submit="submit()">
<!-- form labels -->
    <md-button class="md-raised md-primary testForm" type ="button" ng-click ="reset()">CANCEL</md-button>
    <md-button class="md-raised md-primary testForm" ng-disabled="testForm.$invalid">SAVE</md-button>
</form>

CSS

.md-button.md-raised.md-primary.testForm {
    position: right !important;
    color: #FFFFFF;
    background-color: #4CAF50;
}

Form button display:

enter image description here

Solution

  • pull-right class did the trick.

    <form name="testForm" ng-app="myApp" ng-controller="FormController" class="container-fluid" ng-submit="submit()">
<!-- form labels -->
    <md-button class="md-raised md-primary pull-right testForm" type ="button" ng-click ="reset()">CANCEL</md-button>
    <md-button class="md-raised md-primary pull-right testForm" ng-disabled="testForm.$invalid">SAVE</md-button>
</form>