title: Force modal to not exceed phone screen when zoomed in?
body: <p>I am making this web app where the content of the page is very large (it is a map, so should be) when zooming in the things on the map becomes clear, just like when using google map etc. The things on my map i clickable, and a modal pops up with containing information about the place, the problem i encounter is that to modal is zoomed out as well to fit the outer div that contains the large map.</p>
  
  <p>it is not a problem that the map exceeds the phonescreen on zoom, that is the whole point of it. But it is a problem that the appearing modal is extremly large so people need to zoom out every time they want to see a modal, and then zoom back in on the map to find the place they are looking for.</p>
  
  <p>Is there a way to force the modal to be sized to the screen and not the outer div?</p>
  
  <p>Some detail: I'm using angular.js for my webapp, the modal is a uibmodal from ui-bootstrap. </p>
  
  <p>The map is a div inside an angular view, the div is set to be 100% width and height is forced to be width*1.45 which is the ratio format of the map. (this is done with an angular directive, that listen on screen resize event so height is fluently set to the right amount.</p>
  
  <p>If i am not explaining my self clear enough try visit the live demo at <a href="http://146.185.173.50/ca3/#/home" rel="nofollow noreferrer">http://146.185.173.50/ca3/#/home</a> - you will see that on pc browsers zooming is not possible, but if you go to the app using a phone, zoom in and click on a place it is easy to notice the problem with the modal size.</p>
  
  <p>This problem is very hard to google :o any suggestions? </p>
  
  <p><strong>This is how the modal is activated from the html page:</strong></p>
  
  <pre><code>&lt;span ng-click="showDialog(shop)" class="shop"&gt;{{shop.name}}&lt;/span&gt;
  </code></pre>
  
  <p><strong>This is how it is launched from within angular:</strong></p>
  
  <pre><code>.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
              });
          };
      })
  </code></pre>
  
  <p><strong>This is the directive that manages the size of "the map" (the parent div to the shops):</strong></p>
  
  <pre><code>.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);
              }
          };
  
      })
  </code></pre>