Question

以下是Demo示例。

row content不可滚动，它应该跟随窗口的边缘。

Answer 1

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/treeview/angular">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.material.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2018.1.221/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.1.221/js/angular.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
    

</head>
<body>
<div id="example" ng-app="KendoDemos">
  
    <div class="demo-section k-content" ng-controller="MyCtrl">
        <div class="box-col">
          <div class="box">
            <h4>TreeView</h4>
           <div class="row header">
              <p><b>header</b>
                <br />
                <br />(sized to content)</p>
            </div>
          <div class="row content">
            <div kendo-tree-view="tree"
             k-data-source="treeData"
             k-on-change="selectedItem = dataItem">
                <span k-template>
                     {{dataItem.text}} <button class='k-button' ng-click='click(dataItem)'>Select</button>
                 </span>
             </div>
            </div>
        </div>
        <div class="box-col" ng-show="selectedItem">
          <h4>Selected: {{selectedItem.text}}</h4>
          <button class="k-button" ng-click="addAfter(selectedItem)">Add item below</button>
          <button class="k-button" ng-click="addBelow(selectedItem)">Add child item</button>
          <button class="k-button" ng-click="remove(selectedItem)">Delete</button>
        </div>
    </div>
    </div>
</div>

<script>
  angular.module("KendoDemos", [ "kendo.directives" ])
      .controller("MyCtrl", function($scope){
          $scope.treeData = new kendo.data.HierarchicalDataSource({ data: [
            { text: "Item 1" },
            { text: "Item 2", expanded: true, items: [
              { text: "SubItem 2.1" },
              { text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" }
            ] },
            { text: "Item 3" }
          ]});

          $scope.click = function(dataItem) {
            alert(dataItem.text);
          };

          function makeItem() {
            var txt = kendo.toString(new Date(), "HH:mm:ss");
            return { text: txt };
          };

          $scope.addAfter = function(item) {
            var array = item.parent();
            var index = array.indexOf(item);
            var newItem = makeItem();
            array.splice(index + 1, 0, newItem);
          };

          $scope.addBelow = function() {
            // can't get this to work by just modifying the data source
            // therefore we're using tree.append instead.
            var newItem = makeItem();
            $scope.tree.append(newItem, $scope.tree.select());
          };

          $scope.remove = function(item) {
            var array = item.parent();
            var index = array.indexOf(item);
            array.splice(index, 1);

            $scope.selectedItem = undefined;
          };
    })
</script>
    <style>
      
      html,body {
        height: 100%;
        margin: 0
      }

      .box {
        display: flex;
        flex-flow: column;
        height: 100%;
      }

      .box .row {
        border: 1px dotted grey;
      }

      .box .row.header {
        flex: 0 1 auto;
        /* The above is shorthand for:
        flex-grow: 0,
        flex-shrink: 1,
        flex-basis: auto
        */
      }

      #example{height: 100%;}
      
      #example{height: 100%;}
      
      .box{
         max-height: 100vh !important;
      }

     .box .row.content {
        flex: 1 1 auto;
        overflow-y: scroll !important;
      }
      
    </style>

</body>
</html>

＆＃13;

如何使我的剑道树视图div可滚动，不扩展

1 个答案: