1. Trang chủ
  2. Câu hỏi và trả lời
  3. Góc 1 thiết kế material design cuộn lên trên sau khi đóng hộp thoại trong mã vạch

Góc 1 thiết kế material design cuộn lên trên sau khi đóng hộp thoại trong mã vạch

2017-05-27 15 views
5

Xin chào khi tôi mở cửa sổ hộp thoại bằng tài liệu Góc trong firefox. Trang cuộn lên đầu sau khi hộp thoại đóng. Bất cứ ai có thể giải thích tại sao điều này xảy ra hoặc có một workaround.Góc 1 thiết kế material design cuộn lên trên sau khi đóng hộp thoại trong mã vạch

Xem https://codepen.io/WitteStier/full/EmzKQb/

HTML

<html lang="en"> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 
<body ng-app="App" ng-controller="AppCtrl"> 

    <div style="height:1500px;">Scroll down</div> 

    <md-button ng-click="openDialog($event)"> 
     Open dialog 
    </md-button> 

    <div style="visibility: hidden"> 
     <div class="md-dialog-container" id="dialog-window"> 
     <md-dialog> 
      <md-toolbar> 
      <div class="md-toolbar-tools"> 
       <h2>Hi</h2> 
      </div> 
      </md-toolbar> 
      <md-dialog-content> 
      <div class="md-dialog-content"> 
       <p>Creativity is hard to define.</p> 
      </div> 
      </md-dialog-content> 
     </md-dialog> 
     </div> 
    </div> 

</body> 
</html>

JS

angular.module('App', ['ngMaterial']) 
    .controller('AppCtrl', function($scope, $mdDialog) { 
    $scope.openDialog = function(ev) { 
     $mdDialog.show({ 
     contentElement: '#dialog-window', 
     parent: angular.element(document.body), 
     targetEvent: ev, 
     }); 
    }; 
    });

Nguồn

2017-05-27 WitteStier

+0

Có một vài vấn đề mở về https://github.com/angular/material/issues/10897 này –

Trả lời

1

Đây là giải pháp thay thế. Chỉ cần di chuyển cuộn từ phần tử nội dung vào phần tử bên trong như sau:

<body> 
    <div id="container"> 
     ... Your content ... 
    </div> 
</body> 

body{ 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
} 

#container{ 
    height: 100%; 
    width: 100%; 
    overflow-y: scroll; 
}

Nguồn

2017-09-27 07:02:49

Các vấn đề liên quan

 Các vấn đề liên quan