新Blazor的Telerik UI?下载30天免费试用

树视图不显示水平滚动条

环境

产品 Blazor的TreeView

描述

TreeView控件没有显示水平滚动条，即使TreeView项溢出了它们的容器。有些项目不完全可见。

当某些项扩展到视口之外时，TreeView不允许水平滚动。长项目被切断，不能滚动到。当浏览器被放大时也会发生这种情况。

如何强制滚动条出现在Blazor TreeView组件?

导致\可能原因(s)

TreeView渲染div.k-animation-container具有隐藏溢出:CSS样式。这些元素包装嵌套项，并禁止在展开和折叠动画期间溢出内容。

解决方案

  1. 方法将自定义CSS类设置为TreeView类参数。或者，您也可以使用默认值.k-treeview类来针对页面或应用程序中的所有TreeView实例。
  2. 覆盖隐藏溢出:的风格div.k-animation-container元素内部树状视图。设置为默认值可见溢出:．
  3. 应用尺寸来触发滚动:
    • 如果你想让TreeView本身显示滚动条，设置宽度或高度样式。
    • 如果您希望TreeView容器显示滚动条，请设置宽度，高度而且溢出样式添加到容器。

下面的例子展示了如何实现这两个选项——滚动TreeView和滚动它的父容器。

启用TreeView水平和垂直滚动

TreeView组件滚动
   
TreeView Parent Scrolling
 
  
  @code {private IEnumerable FlatData {get;设置;} private IEnumerable ExpandedItems {get; set; } = new List(); protected override void OnInitialized() { FlatData = LoadTreeViewData(); ExpandedItems = FlatData.Where(x => x.HasChildren == true); } #region TreeView data generation private List LoadTreeViewData() { List items = new List(); PopulateChildren(items, null, 1); return items; } private int TreeLevels { get; set; } = 3; private int ItemsPerLevel { get; set; } = 2; private int IdCounter { get; set; } = 1; private void PopulateChildren(List items, int? parentId, int level) { for (int i = 1; i <= ItemsPerLevel; i++) { var itemId = IdCounter++; items.Add(new TreeItem() { Id = itemId, Text = $"Level {level} Item {i} with some additional long text that requires a scrollbar", ParentId = parentId, HasChildren = level < TreeLevels }); if (level < TreeLevels) { PopulateChildren(items, itemId, level + 1); } } } public class TreeItem { public int Id { get; set; } public string Text { get; set; } public int? ParentId { get; set; } public bool HasChildren { get; set; } } #endregion }
        
       
      
      
     
     

      

       

        在本文中

       
      

      
      

       

        相关文章

       
      

      
      

       找不到你需要的帮助?
       
       
        
        
        
         
         
          
         
        改进这篇文章
      

     

    
   
   

   
  
  
  
  
  
  
 
Baidu