Search code examples
javascriptangularjsangularjs-material

Open bottom sheet inside a div

I want to open a bottom sheet inside a div. I was able to got it working but it fills the whole page.

$scope.showListBottomSheet = function() {

        $scope.alert = '';
        $mdBottomSheet.show({
            templateUrl: 'template/newCountryForm.html',
            controller: 'Ctrl1'
        }).then(function(clickedItem) {
            $scope.alert = clickedItem['name'] + ' clicked!';
        }).catch(function(error) {
            // User clicked outside or hit escape
        });
    };

Before Clicking

After Clicking

I want it to only fill the red part and I have no idea how to do it

Solution

  • Turns out I just needed to add the key "parent" in

    var parentEl = angular.element(document.querySelector('.red'));
$mdBottomSheet.show({
     parent: parentEl,
     templateUrl: 'template/newCountryForm.html',
     controller: 'Ctrl1'
 })