md dialog not working properly?

Question

I'm new to angular material:

I want to show dialog for editing records in a table:

I referenced angular material and angular aria, used ngMaterial dependency and $mdDialog service. I have a div containing all editing fields, the div visibility is set to hidden:

<div style="visibility: hidden">
    <div class="md-dialog-container" id="taskEdit">
        <md-dialog style="width:100%; height:100%" layout-padding>
            <md-toolbar>
                <div class="md-toolbar-tools">
                    <h2>Edit Task</h2>
                    <span flex></span>
                </div>
            </md-toolbar>
            <ng-form name="TaskForm">
                <div layout-gt-sm="row">
                    <md-input-container>
                        <label>Task Title</label>
                        <input name="TaskTitle" ng-model="task.title" required>
                        <div ng-messages="TaskForm.TaskTitle.$error">
                            <div ng-message="required">This is required</div>
                        </div>
                    </md-input-container>

                    <md-input-container class="md-block" flex-gt-sm>
                        <label>Description</label>
                        <textarea ng-model="task.description" md-maxlength="150" md-select-on-focus></textarea>
                    </md-input-container>
                    <md-input-container class="md-block">
                        <label>Due Date</label>
                        <md-datepicker style="margin-top: 2px;" ng-model="task.dueDate"></md-datepicker>
                    </md-input-container>

                    <md-input-container>
                        <label>Task Status</label>
                        <input name="TaskStatus" ng-model="task.status">
                    </md-input-container>
                </div>
            </ng-form>

            <input class="btn btn-primary" style="width:15%" type="submit" ng-disabled="!TaskForm.$valid" ng-click="EditTask()" value="Submit" aria-label="submit" />

        </md-dialog>
    </div>
</div>

here's the showDialog function::

  $scope.showDialog = function () {

        $mdDialog.show({
            controller: DialogController,
            contentElement: '#taskEdit',
            parent: angular.element(document.body),
            clickOutsideToClose: true
        });
    };

function DialogController($scope, $mdDialog) {
            $scope.hide = function () {
                $mdDialog.hide();

            };
            $scope.cancel = function () {

                $mdDialog.cancel();

            };
        }

but when I click the button, the dialog is not appearing properly, it lacks the animation and is rendered in the same layer as the parent page:

Answer 1

You need to refer the angular material css

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.4/angular-material.css">