Search code examples
angularjsangularjs-material

Open multiple bottom sheet - stacked one above another using $mdBottomSheet

am using Angularjs $mdBottomSheet to open bottom sheet above app. I can open one bottom sheet but when tried to open another, old one is replaced by new one or overlapped. I want to show bottom sheet as stacked in case of multiple bottom sheet open. see this image. there are multiple message I want to show in bottom. Is it possible through $mdBottomSheet. What are alternatives.

stackedmessagesonbottomofapp

      $mdBottomSheet.show({
                    templateUrl: 'templatefolder/xyz.html',                       
                    clickOutsideToClose: false,
                    escapeToClose: false,                    
                    controller: MessageController
                }).catch(function(error) {
                    
                });
Solution

  • AngularJS Material implements Modal Bottom Sheets from the Material Design Spec. This design does not allow for multiple, stacked bottom sheets to be open at one time.

    Additionally, for tablets or desktop screens the spec defines a number of alternatives to consider alternatives to bottom sheets

    If you want to create a custom implementation of panels that can stack, then I would suggest that you investigate our more flexible $mdPanel service.