I am working on a modal dialog template that includes a GoogleMap. My goal is to have the GoogleMap take up all available space below a header and sub-header within the template.
The height of the header and sub-header are defined using mediaqueries in the CSS.
After the header and sub-header, I want the remaining space inside the dialog to be filled by the GoogleMap.
In my current controller setup:
$scope.creategooglemapsmodal = function() {
$scope.item.showmap = true;
$ionicModal.fromTemplateUrl('templates/Gmapdialog.html', {
scope: $scope,
animation: 'slide-in-up'
})
.then(function (modal) {
$scope.googlemapsmodal = modal;
$scope.googlemapsmodal.show()
.then(function() {
// Once the modal is shown, I need to adjust the height of the map container before initializing the map.
$scope.showmapinit();
$scope.modalhiddenlistener = $scope.$on('modal.hidden', function() {
$scope.hidegooglemapsmodal();
});
});
});
};
What is the best approach to achieve this layout?