Map with dynamic size at div height

Asked

Viewed 1,169 times

3

I have a map, and I need it to occupy the height of the div, so if I change the resolution and the div lowers the height, it will be in the dynamic position. If it is an angular solution, it would be ideal.

 <div style="width:500px; border: solid 1px;">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3602.4009104657152!2d-49.30773928498532!3d-25.45828518377545!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94dce3a1c0ef8c39%3A0xf9c1441e4c44a8ca!2sR.+Capiberibe%2C+410+-+Santa+Quiteria%2C+Curitiba+-+PR%2C+80310-170!5e0!3m2!1spt-BR!2sbr!4v1484846564537" width="500" height="200" frameborder="0" style="border:0" allowfullscreen>
     </iframe>
  </div>

css angularjs

3 answers

3

Just change the attribute height of iframe to 100%. If you want to follow the same idea for width, just change the attribute width.

<div style="width:500px; height:550px; border: solid 1px;">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3602.4009104657152!2d-49.30773928498532!3d-25.45828518377545!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94dce3a1c0ef8c39%3A0xf9c1441e4c44a8ca!2sR.+Capiberibe%2C+410+-+Santa+Quiteria%2C+Curitiba+-+PR%2C+80310-170!5e0!3m2!1spt-BR!2sbr!4v1484846564537" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen>
    </iframe>
</div>

  • So, the solution that they gave me even scrolls with html, but I think my problem may be in the material angular, I made a codepen for you to see the problem. The map does not get 100% height inside tabs. http://codepen.io/anon/pen/qRrEWP

  • The problem is the size of md-content. Nothing to do with the iframe. I don’t really know how to help you, it completely escapes the scope of the question and I barely understand CSS to be able to help seeing Codepen. I even opened it, if I find anything that can help, I’ll let you know.

  • All right, I’m seeing here what can be done, thanks!

2


I managed to get the result I needed, the problem is not in the map but in the structure of Angular Material, to leave a div or dynamic height map within tabs.

Basically it was solved using the components of the Angular material with the LAYOUT directive: 

<div layout="column" flex layout-fill> // iframe ou div com height 100% </div>

The code is complete:

angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])

.controller('AppCtrl', function($scope, $mdDialog) {
  $scope.status = '  ';
  $scope.customFullscreen = false;

  $scope.showAlert = function(ev) {  
    
    $mdDialog.show(
      $mdDialog.alert()
        .parent(angular.element(document.querySelector('#popupContainer')))
        .clickOutsideToClose(true)
        .title('This is an alert title')
        .textContent('You can specify some description text in here.')
        .ariaLabel('Alert Dialog Demo')
        .ok('Got it!')
        .targetEvent(ev)
    );
  };

  $scope.showConfirm = function(ev) {
    // Appending dialog to document.body to cover sidenav in docs app
    var confirm = $mdDialog.confirm()
          .title('Would you like to delete your debt?')
          .textContent('All of the banks have agreed to forgive you your debts.')
          .ariaLabel('Lucky day')
          .targetEvent(ev)
          .ok('Please do it!')
          .cancel('Sounds like a scam');

    $mdDialog.show(confirm).then(function() {
      $scope.status = 'You decided to get rid of your debt.';
    }, function() {
      $scope.status = 'You decided to keep your debt.';
    });
  };

  $scope.showPrompt = function(ev) {
    // Appending dialog to document.body to cover sidenav in docs app
    var confirm = $mdDialog.prompt()
      .title('What would you name your dog?')
      .textContent('Bowser is a common name.')
      .placeholder('Dog name')
      .ariaLabel('Dog name')
      .initialValue('Buddy')
      .targetEvent(ev)
      .ok('Okay!')
      .cancel('I\'m a cat person');

    $mdDialog.show(confirm).then(function(result) {
      $scope.status = 'You decided to name your dog ' + result + '.';
    }, function() {
      $scope.status = 'You didn\'t name your dog.';
    });
  };

  $scope.showAdvanced = function(ev) {
    $mdDialog.show({
      controller: DialogController,
      templateUrl: 'dialog1.tmpl.html',
      parent: angular.element(document.body),
      targetEvent: ev,
      clickOutsideToClose:true,
      fullscreen: $scope.customFullscreen // Only for -xs, -sm breakpoints.
    })
    .then(function(answer) {
      $scope.status = 'You said the information was "' + answer + '".';
    }, function() {
      $scope.status = 'You cancelled the dialog.';
    });
  };

  $scope.showTabDialog = function(ev) {
    $mdDialog.show({
      controller: DialogController,
      templateUrl: 'tabDialog.tmpl.html',
      parent: angular.element(document.body),
      targetEvent: ev,
      clickOutsideToClose:true
    })
        .then(function(answer) {
          $scope.status = 'You said the information was "' + answer + '".';
        }, function() {
          $scope.status = 'You cancelled the dialog.';
        });
  };

  $scope.showPrerenderedDialog = function(ev) {
    $mdDialog.show({
      controller: DialogController,
      contentElement: '#myDialog',
      parent: angular.element(document.body),
      targetEvent: ev,
      clickOutsideToClose: true
    });
  };

  function DialogController($scope, $mdDialog) {
    $scope.hide = function() {
      $mdDialog.hide();
    };

    $scope.cancel = function() {
      $mdDialog.cancel();
    };

    $scope.answer = function(answer) {
      $mdDialog.hide(answer);
    };
  }
});
 body, html {
      height:100%;
      padding:0;
      margin:0;
    } 
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
  
  <link rel='stylesheet prefetch' href='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.css'>
  <link rel='stylesheet prefetch' href='https://material.angularjs.org/1.1.1/docs.css'>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js'></script>
<script src='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.js'></script>

<div class="lalala" ng-controller="AppCtrl" layout="column" layout-align="center center" ng-app="MyApp">
    <div class="dialog-demo-content" layout="row" layout-wrap="" layout-margin="" layout-align="center">
      <md-button class="md-primary md-raised" ng-click="showTabDialog($event)">
        Abrir
      </md-button>
    </div>

    <script type="text/ng-template" id="tabDialog.tmpl.html"><md-dialog aria-label="Mango (Fruit)" style="width:60%; height:60%;">
      <md-dialog-content style="height:100%">
        <div layout="column" layout-fill>
          <md-content style="height:100%;">
            <div layout-fill layout="row">
              <md-content flex="100" layout="column">
                <md-tabs md-stretch-tabs="always" md-border-bottom flex layout-fill>
                  <md-tab label="warning new" layout-fill>
                    <md-tab-content flex layout-fill>                     
                        <div layout="column" flex layout-fill> 
                          <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3601.7912696347275!2d-49.29909298498467!3d-25.478644383766003!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94dce369d560de93%3A0xb2060c21361b8e75!2sR.+S%C3%A3o+Mateus+-+Port%C3%A3o%2C+Curitiba+-+PR!5e0!3m2!1spt-BR!2sbr!4v1485445283960" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen>              
                          </iframe>                         
                        </div>
                      </md-tab-content>
                    </md-tab>
                    <md-tab>
                      <md-tab-label>
                        <md-icon class="material-icons md-primary">Tab 02</md-icon>
                      </md-tab-label>
                      <md-tab-body>
                        <div layout="column" layout-fill>
                          <div flex layout-fill>
                            <md-content class="containingDiv" flex layout-fill>
                              <p>this section should just take up however much space it needs.</p>
                              <p>this section should just take up however much space it needs.</p>
                              <p>this section should just take up however much space it needs.</p>
                              <p>this section should just take up however much space it needs.</p>
                              <p>this section should just take up however much space it needs.</p>
                              <p>this section should just take up however much space it needs.</p>
                              <p>this section should just take up however much space it needs.</p>
                              <p>this section should just take up however much space it needs.</p>
                              <p>this section should just take up however much space it needs.</p>
                              <p>this section should just take up however much space it needs.</p>
                              <p>this section should just take up however much space it needs.</p>
                              <p>this section should just take up however much space it needs.</p>                              
                            </md-content>
                          </div>
                        </div>
                      </md-tab-body>
                    </md-tab>
                    <md-tab>
                      <md-tab-label>
                        <md-icon class="material-icons md-primary">warning</md-icon>
                      </md-tab-label>
                      <md-tab-body>
                        <div layout="column" layout-fill>
                          <div flex layout-fill>
                            <md-content style="" class="containingDiv" flex layout-fill>
                              <p>La section should just take up however much space it needs.</p>
                              <p>this section should just take up however much space it needs.</p>
                            </md-content>
                          </div>
                        </div>
                      </md-tab-body>
                    </md-tab>
                  </md-tabs>
                </md-content>
              </div>
            </md-content>
          </div>
        </md-dialog-content>
      </md-dialog>
    </script>
</div>

  • 1

    Can you explain better how you solved your problem by adding an example of what you had to change after all? The answer has to agree with the question, whoever else wants to answer will not guess what the problem is and what the resolution was.

  • 1

    Any code html, javascript and css may be inserted by tag code <> from the editor, so it is code for the others

  • 1

    Basically it was solved using the components of the Angular material with the LAYOUT directive: <div layout="column" flex layout-Fill> // iframe or div with height 100% </div>

0

Frame detro has width="500" height="200 options"

If you want height compatible with Dive change to height="100%" If you want width compatible with Dive switch to widht="100%"

  • Got it, got some idea to solve Md-content?

Browser other questions tagged css angularjs

You are not signed in. Login or sign up in order to post.