Resizing the IonicModal to fit exactly to its content


#1

How to customize the modal view to remove the “Empty Spaces” form the shown images ? In general, how to set height of the modal view appropriately according to its contents ?

I’m overriding the modal CSS as mentioned below. But with any overriding, I could not get the empty spaces removed.

@media (min-width: 100px) {
.modal {
    top: 10%;
    right: 10%;
    bottom: 10%;
    left: 10%;
    min-height: 100px;
    width: 80%;
  }
}

HTML

<ion-modal-view class=""> 
    <ion-header-bar class="bar bar-header bar-positive">
        <h1 class="title">Contact</h1>
        <button class="button button-clear button-primary" ng-click="modal.hide()">Cancel</button>
    </ion-header-bar> 
    <ion-content class="padding "> 
        <label class="item item-input"> <span class="input-label">Email</span>
            <input ng-model="newUser.email" type="text">
        </label>
        <button class="button button-full button-positive" ng-click="createContact(newUser)">Create</button>
    </ion-content>
</ion-modal-view>

#2

What I would do is when the modal is opened, set the height of the ion-modal to the height of the header+content.
I haven’t tested but would work.
Also, you could try setting the height to auto.


#3

i made this directive very quickly (for sure can be write in a better way) but works good and work with dinamic changes inside the content

.directive('modalFitContent', function ($timeout) {
  return {
    restrict: 'A',
    scope:{
      element:'@'
    },
    link: function postLink (scope, element, attrs) {
      var contentElement = element[0].querySelector(scope.element);
      var footerElement = element[0].querySelector(".bar-footer");
      var headerElement = element[0].querySelector(".bar-header");
      var modalElementJquery = angular.element(element[0]);
      var footerHeigth=0;
      var contentHeigth=0;
      var headerHeigth=0;
      var observer = new MutationObserver(function(mutations) {

        $timeout(function() {
          contentHeigth =contentElement === null ? 0 : contentElement .offsetHeight;
          footerHeigth =footerElement === null ? 0 : footerElement.offsetHeight;
          headerHeigth =headerElement == null ? 0 : headerElement.offsetHeight;
          var totalHeight = (contentHeigth+footerHeigth+headerHeigth);
         if(totalHeight>0){
            modalElementJquery.css({'height':totalHeight+"px"});
          }
        }, 100);

      });
      observer.observe(contentElement, {
        childList: true,
        subtree: true,
        attributes: true,
        characterData: true
      });
    }
  };
});

and in script/template html of modal:

<script id="modalTemplate.html" type="text/ng-template">
    <ion-modal-view class="modal-center" modal-fit-content element=".errors" >

      <ion-content>
        <div class="errors"   >
          <span ng-show="errors.1">error.1</span>
          <span ng-show="error.2">error2</span>
          <span ng-show="error.3">error3</span>
          <span ng-show="error.4">error4</span>
        </div>
      </ion-content>
      <ion-footer-bar  class="center">
        <div>foooter FOOOTER</div>
      </ion-footer-bar>
    </ion-modal-view>
  </script>

change the observe mutations config to the events what you will use.

:stuck_out_tongue_winking_eye:


#4

Check the styles that you need to use:

.myModal{
    width: auto !important;
    margin: 0 auto;
    bottom: initial !important;

    max-height: initial !important;
    height: auto !important;
    min-height: initial !important;

    ion-content{
        position: relative;
        bottom: initial;
    }
}

and the template

<ion-modal-view class="myModal">
    <ion-content scroll="false">
        <div class="padding text-center">
            <p>Hello world!</p>
        </div>
    </ion-content>
</ion-modal-view>

Regards, Nicholls