CODEWITHSUNDEEP
htmlcssangularjsangular-materialangular-material2
jsPlayer
jsPlayer

Reputation: 1245

Angular Material dialog doesnt shrink

enter image description here

enter image description here

have many dialog boxes and i been playing with height 100% and layouts , its just not goign away, the space after the button is not auto shrinking like a regular mdDialog. I can play with break line and layout padding to make it look ok when the map is on since its only little bit of space. But when the map is turned off like the second pic, the space is tool large. How do i solve this preferably an angular material solution 

<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>

Upvotes: 0

Views: 668

Answers (1)

jsPlayer
jsPlayer

Reputation: 1245

solved the issue by using height:auto inside

removed the layout padding from the md-dialog-actions this solved the issue

Upvotes: 1

Related Questions