I am very new to angular js. But whenever i set the laptop resolution - 1366 x 768’ my popup gets truncated.
Whenever the content increase for the popup the popup gets truncated. This is how i open my popup
$scope.openPreviousOrdersPopup= function(){
$scope.siteInputError= null;
previousOrdersPopup = $modal({
template: 'partials/editQuoteRequest/previousOrdersPopup.html',
show: true,
persist: true,
backdrop: 'static',
scope: $scope
});
};
The code for the popup is :
<!-- Confirmation popup for closing the quote request without save -->
<div id="transitionPopupId" popup-dispatcher="transitionPopupId" style="overflow :auto; max-height: 40%">
<div class="modal-header" >
<h3 ng-if="customerTeamList && customerTeamList.length == 1" style="float: left;font-size: 13px;" translate>popup.newComment</h3>
<h3 ng-if="customerTeamList && customerTeamList.length > 1" style="float: left;font-size: 13px;" translate>popup.chooseAndComment</h3>
<h3 ng-if="!customerTeamList && quoteRequest.status == 'draft'" style="float: left;font-size: 13px;" translate>popup.newComment</h3>
<h3 ng-if="quoteRequest.status !== 'Draft'" style="float: left;font-size: 13px;" translate>popup.commentTitle</h3>
<div class="buttonClose" ng-click="inProgress.submit = false;closeDetailQr();dismiss();removeParent('transitionPopupId');"></div>
</div>
<div style="overflow: auto ;padding-bottom: 0px;overflow-y: hidden" class="modal-body">
<div style="max-height: 240px;overflow-y: auto;overflow-x: hidden">
<div ng-if="customerTeamList && customerTeamList.length > 1 && quoteRequest.status != constants.yourInputRequired"
style="background: #E4E4E4; margin-bottom: 20px; width: 515px"
ng-repeat="customerTeam in customerTeamList">
<input type="radio" ng-model="quoteRequest.customerTeamId" ng-value="customerTeam.localCustomerTeamId" ng-change="changeCustomerTeam(customerTeam)" style="float: left; margin-top: 13px; margin-left: 10px; margin-right: 5px">
<div style="padding: 10px">
<div style="float: left; width: 45%">
<p style="font-weight: bold">{{customerTeam.localCustomerTeamName}}</p>
<p class="paragraph">{{customerTeam.localCustomerTeamDescription}}</p>
</div>
<div style="float: right; width: 45%">
<p class="paragraph">{{customerTeam.localQuoteOwner.localFirstName}} {{customerTeam.localQuoteOwner.localLastName}}</p>
<p class="paragraph">{{customerTeam.localQuoteOwner.localPhone}}</p>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<p class={{required}} translate>popup.messageToQO</p>
<div ng-form="commentForm">
<p ng-show="showErrorSubmitComment" style="color: red">The comment is required.</p>
<textarea id="submitComment"
name = "submitComment"
my-maxlength="200" rows="5"
style="width:500px;margin-bottom: 0px;height: 80px"
ng-model="rejectionComment.value">
</textarea>
</div>
<div ng-show="showAddEmail">
<!--add additional email ids at quote request submission step> <!-->
<div ng-form="ccEmailForm" id="emailRecipients" >
<div>
<p translate>profile.notifAdditionnalEmailRecipients</p>
<span class="tooltipInfo ng-scope" tooltip="notification for creation of this Quote request will also be sent to the email addresses provided" tooltip-placement="right" style="float: right; margin-right: 338px; margin-top: -28px;"></span>
</div>
<div ng-init="initForm(ccEmailForm)">
<div style="float: left">
<input type="text" name="listAdditionalEmailAddresses" ng-model="addEmailvalue" style="float: left" ng-pattern="/^{{constants.email_validation}}$/">
<div class="clear"></div>
<p style="margin-left: 5px;text-align: left; " ng-show="ccEmailForm.listAdditionalEmailAddresses.$error.pattern" class="formError" translate>form.wrongFormatEmail</p>
</div>
<button class="bouton_action" style="margin-left: 30px" ng-click="addAdditionalEmails()" translate>button.addEmail</button>
<div class="clear"></div>
<select style="height: 100px !important;" id="myselection" multiple size="5" ng-model="listEmailAddressToDelete" ng-multiple=true style="float: left" ng-options="ccEmail as ccEmail for ccEmail in listAdditionalEmailAddresses">
</select>
<button class="bouton_action" style="margin-left: 30px" ng-click="delAdditionalEmails()" translate>button.deleteEmail</button>
</div>
</div>
</div>
<div class="clear"></div>
<div class="modal-footer" >
<button class="bouton_action" ng-click="inProgress.submit = false;manageOrderRejection(false);closeDetailQr();dismiss();removeParent('transitionPopupId');" translate>button.cancel</button>
<button class="bouton_action" ng-disabled="!quoteRequest.customerTeamId" ng-click="manageOrderRejection(true);submit()" translate>button.ok</button>
</div>
</div>
code to calculate top position
app.directive('popupDispatcher', ['$timeout', function($timeout){
return {
restrict: 'A',
link: function(scope, linkElement, attrs) {
$timeout(function() {scope.$watch
(
function () {
return linkElement.height();
},
function (newValue, oldValue) {
if (newValue > 0) {
if(typeof scope.initPosition == 'function'){
// call the initPosition function if size of the popup has change
$timeout(function() {scope.initPosition(String(attrs.popupDispatcher));}, 200);
}
else{
// call the initPosition function if size of the popup has change for isolated scope of a directive
$timeout(function() {scope.$root.initPosition(String(attrs.popupDispatcher));}, 200);
}
}
}
)},300); // 300 corresponds to animation delay to display popup
}
};
}]);
// set the popup position depending on scroll position
$rootScope.initPosition = function(id){
if (iframeId != "" && iframeId != null) {
var thePopup = $('#' + id).parent();
$rootScope.myPopupId = id;
var popupPosition = $(window.parent.document).scrollTop();
if (popupPosition < 100) {
popupPosition = 100;
}
var deltaPosition = (popupPosition + thePopup.height()) - ($(window).height() -20);
// in case of truncated popup resize the iframe
if(deltaPosition > 0 && id != "loadingPopupId"){
contentResize(popupPosition + thePopup.height() + 20);
}
// set the horizontal scrollBar
var scrollLeftPos = ($(window).width() - thePopup.width()) / 2;
$(window).scrollLeft(scrollLeftPos);
thePopup.css('position','absolute');
if(id=='transitionPopupId' && deltaPosition > 0){
thePopup.css('top',deltaPosition - 20);
}else{
thePopup.css('top',popupPosition);
}
}
};
/**
* Function called by the heightWatcher directive to call the resize function of the parent (MSS integration)
*/
var contentResize = function (height) {
if(typeof height == "undefined") {
height = $("#parentDivForOQT").height();
}
if( height< 500) {
height = 500;
}
$("body").height(height+20);
if(parent.iframeResize) {
parent.iframeResize(iframeId); //set by back-office to the value retrieved from URL
}
};
