角度材质对话框不会缩小

时间:2017-06-01 02:27:50

标签: html css angularjs angular-material angular-material2

enter image description here

enter image description here

有很多对话框,我一直在玩高度100%和布局,它只是没有走开,按钮后面的空间不像普通的mdDialog那样自动收缩。我可以玩断线和布局填充,使地图开启时看起来不错,因为它只有一点点的空间。但是当地图像第二张照片一样关闭时,空间就是工具大。我如何解决这个优选的角度材料解决方案

<md-dialog class="updateLocationMap" flex="50" >
  <form name="updateLocationForm">

    <md-toolbar>
      <close-dialog label="{{'MENU-ITEMS.UPDATELOC-PARENT' | translate}}"></close-dialog>
    </md-toolbar>

    <md-dialog-content >
      <div layout layout-padding>
        
        <si-parent-search
          on-update="ctrl.updateSelectedParent(selected)"
          classification='ctrl.asset.classification'
          pre-select='ctrl.asset.parents[ctrl.asset.parents.length -1]'
        ></si-parent-search>
        
        <span flex></span>
        
        <md-switch ng-model='ctrl.useMap'>Use Map</md-switch>
      </div>
      
<div layout-padding>
      <si-coordinate-select ng-if='ctrl.useMap'
        on-update='ctrl.updateLatLong(lat, long)'
        mapid='update-location-xs'
      ></si-coordinate-select>
</div>
      <div ng-if='!ctrl.useMap' layout layout-xs='column' layout-padding>
          <md-input-container flex class="md-accent">
              <label translate="LABELS.LAT"></label>
              <input ng-model="ctrl.asset.latitude"  required>
          </md-input-container>
          <md-input-container flex class="md-accent">
              <label translate="LABELS.LONG"></label>
              <input ng-model="ctrl.asset.longitude" required>
          </md-input-container>
      </div>

    </md-dialog-content>
    
    <md-dialog-actions layout-padding >
      <md-button aria-label="Close Dialog" ng-click="ctrl.cancel()" class="md-accent" translate="BUTTON.CANCEL"></md-button>
      <input ng-if="!ctrl.useMap" type="submit"  ng-click="ctrl.submit()" value="{{'BUTTON.UPDATE' | translate}}" class="md-button md-accent">
      <input ng-if="ctrl.useMap" type="submit" ng-disabled="updateLocationForm.$invalid" ng-click="ctrl.submit()" value="{{'BUTTON.UPDATE' | translate}}" class="md-button md-accent">
    </md-dialog-actions>
  </form>
</md-dialog>

1 个答案:

答案 0 :(得分:1)

使用height:auto inside

解决了这个问题

从md-dialog-actions中删除了布局填充,这解决了问题