I am currently developing a web application that features a large content page, specifically a map which should display detailed information upon zooming in similar to Google Maps. The interactive elements on my map are clickable, triggering a modal popup with details about the location. However, I am facing an issue where the modal is also zoomed out to fit the outer div containing the expansive map.
While it's intentional for the map to exceed the phone screen upon zoom, the problem arises when the modal appears extremely large, requiring users to constantly zoom out to view it and then zoom back in to locate their desired place on the map.
Is there a solution to ensure that the modal is sized to the screen rather than the outer div?
Additional information: My web app utilizes AngularJS, and the modal is implemented using uibmodal from ui-bootstrap.
The map is within a div inside an Angular view, set to 100% width, with the height forced to be width*1.45 following the map's ratio format. This adjustment is done through an Angular directive that dynamically sets the height based on the screen resize event.
If my explanation is unclear, you can visit the live demo at . On PC browsers, zooming is disabled, but if accessed via a mobile device and zoomed in while clicking on a location, the issue with the oversized modal becomes evident.
This particular problem has been challenging to search for solutions online. Any suggestions are greatly appreciated!
Here's how the modal is triggered in the HTML page:
<span ng-click="showDialog(shop)" class="shop">{{shop.name}}</span>
And here's how it is invoked within Angular:
.controller('ShopCtrl', function ($scope, $location, $uibModal, ShopService, selectedShopFac) {
$scope.shops = [];
$scope.selectedShop = selectedShopFac.setSelectedShop({});
ShopService.getShops().then(
function (response) {
$scope.shops = response.data;
},
function (response) {
console.log(response.data.toString());
});
$scope.showDialog = function (shop) {
$scope.selectedShop = selectedShopFac.setSelectedShop(shop);
$uibModal.open({
templateUrl: 'app/home/shop/shop.html',
scope: $scope
});
};
})
Lastly, here's the directive responsible for managing the size of "the map," the parent div to the shops:
.directive('mapDir', function ($window) {
return {
restrict: 'A',
link: function (scope, element) {
var mapDiv = element;
angular.element(document).ready(function () {
mapDiv.height(mapDiv.width() * 1.45);
});
function onResize() {
mapDiv.height(mapDiv.width() * 1.45);
}
onResize();
angular.element($window).on('resize', onResize);
}
};
})