Hey there! I've put together a custom modal window in Angular Material by combining the custom modal window example with the Angular Material slider demo. Everything is working well except for the fact that the sliders inside the modal window are not responsive and end up overlapping each other. I've tried using flex but haven't had any success yet. Here's my plunk for your reference.
$scope.showAdd = function(ev) {
$mdDialog.show({
controller: DialogController,
template: '<md-dialog aria-label="Load Slider" flex flex="100"> * <div ng-controller="AppCtrl"><md-content style="margin: 16px; padding:16px"><h3>Total <span ng-attr-style="border: 1px solid #333; background: rgb({{color.red}},{{color.green}},{{color.blue}})"> </span> </h3> <div layout> <div flex="10" layout layout-align="center center"> <span class="md-body-1">CALL</span> </div> <md-slider flex min="0" max="255" ng-model="color.red" aria-label="red" id="red-slider" class> </md-slider> <div flex="20" layout layout-align="center center"> <input type="number" ng-model="color.red" aria-label="red" aria-controls="red-slider"> </div> </div> <div layout> <div flex="10" layout layout-align="center center"> <span class="md-body-1">SMS</span> </div> <md-slider flex ng-model="color.green" min="0" max="255" aria-label="green" id="green-slider" class="md-accent"> </md-slider> <div flex="20" layout layout-align="center center"> <input type="number" ng-model="color.green" aria-label="green" aria-controls="green-slider"> </div>
</div> </md-content> </div> .. <div class="md-actions" layout="row"> <span flex></span> <md-button ng-click="answer(\'not useful\')"> Cancel </md-button> <md-button ng-click="answer(\'useful\')" class="md-primary"> Save </md-button> </div></md-dialog>',
targetEvent: ev,
})
.then(function(answer) {
$scope.alert = 'You said the information was "' + answer + '".';
}, function() {
$scope.alert = 'You cancelled the dialog.';
});
};
Check out this screenshot of the custom modal with the sliders overlapping other components inside. https://i.sstatic.net/KY7Ef.jpg