モーダルウィンドウは切り捨てられます

Question

私は角度jに非常に新しいです。しかし、私はラップトップの解像度を設定するたびに - 1366 x 768 'のポップアップが切り詰められます。

ポップアップのコンテンツが増加するたびに、ポップアップが切り捨てられます。これは私が

$scope.openPreviousOrdersPopup= function(){ 
    $scope.siteInputError= null; 
    previousOrdersPopup = $modal({ 
     template: 'partials/editQuoteRequest/previousOrdersPopup.html', 
     show: true, 
     persist: true, 
     backdrop: 'static', 
     scope: $scope 
    }); 
    }; 

ポップアップのコードを、私のポップアップを開く方法です。トップの位置を計算するために

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

コード

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

Answer 1

は、それは、水平または垂直に切り捨てられますでしょうか？ クラスmodal-bodyのdivは、overflow-y：hiddenを持っています。これは、コンテンツが高すぎる場合、その内容を切り捨てます。 max-heightのあるdivにはoverflow-x：hiddenもあります。これは、幅が広すぎるとコンテンツを切り捨てます。