madz
June 18, 2015, 10:45pm
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>
EffakT
June 19, 2015, 3:26am
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.
jpp
November 17, 2016, 4:51am
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.
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