3

Tenho um mapa e preciso que ele ocupe a altura da div, se eu mudar de resolução e a div diminuir a altura ele fique na posição dinâmica. Se for uma solução em angular seria 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>

3 Respostas 3

3

Só mudar o atributo height do iframe pra 100%. Se quiser seguir a mesma ideia pra largura, é só alterar o atributo 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>

3
  • Então, a solução que me passaram até rola com html, mas acho que meu problema pode estar no angular material, fiz um codepen pra vcs verem o problema. O mapa não fica 100% na altura dentro das tabs. codepen.io/anon/pen/qRrEWP 19/01/2017 às 18:07
  • O problema é o tamanho de md-content. Nada a ver com o iframe. Não sei bem como te ajudar, isso foge completamente do escopo da pergunta e eu mal entendo de CSS pra poder ajudar vendo o CodePen. Eu até abri ele, se achar algo que possa ajudar, te aviso.
    – Jéf Bueno
    20/01/2017 às 13:05
  • Beleza, tb estou vendo aqui o que pode ser feito, valeu! 20/01/2017 às 15:33
2

Consegui chegar no resultado que eu precisava, o problema não é no mapa e sim na estrutura do Angular Material, pra deixar uma div ou mapa com altura dinâmica dentro das tabs.

Basicamente foi resolvido usando os componentes do Angular material com a diretiva LAYOUT:

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

Fica o código completo:

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>

3
  • 1
    Pode explicar melhor como resolveu o seu problema adcionando um exemplo de o que teve de alterar afinal? A resposta tem de ter concordância com a pergunta, quem mais quiser responder não vai adivinhar qual é o problema e qual foi a resolução.
    – Jorge B.
    27/01/2017 às 12:27
  • 1
    Qualquer código html, javascript e css pode ser inserido pela tag código <> do editor, assim fica de código pros demais
    – novic
    27/01/2017 às 12:31
  • 1
    Basicamente foi resolvido usando os componentes do Angular material com a diretiva LAYOUT: <div layout="column" flex layout-fill> // iframe ou div com height 100% </div> 27/01/2017 às 12:45
0

Detro do frame tem as opções width="500" height="200"

Se quer altura compativel com a dive mude para height="100%" Se quer largura compativel com a dive mude para widht="100%"

1
  • Entendi, tem alguma ideia pra resolver o md-content? 19/01/2017 às 18:24

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .