从上一篇关于ListView布局样式的文章中，我们知道XAFBlazor是移动优先的，如果想在PC端有更好的用户体验，我们需要对布局样式进行修改。这篇介绍在之前文章中提到的FilterPanel，它的样式调整稍微要复杂一些，但思路与之前的差不多。

当过滤项过多时，FilterPanel会变高，超出了容器的高度后，整个容器会出现滚动条，如下图

我们需要的是过滤项多时，在DxTreeView内部出现滚动条，如下图

由于DxTreeView并不支持这个功能，我们需要修改其内部布局样式，下面是修改演示

下面是Blazor组件中的DOM结构

下面是样式代码

XAF Blazor FilterPanel 布局样式的更多相关文章

  1. CSS3知识点整理（四）----布局样式及其他

    包括CSS3多列布局样式.Flexbox伸缩布局.盒子模型等.重点介绍了Flexbox伸缩布局的各种属性用法. 一.多列布局 为了能在Web页面中方便实现类似报纸.杂志那种多列排版的布局,W3C特意给 ...

  2. Android开发工程师文集-Fragment，适配器，轮播图，ScrollView，Gallery 图片浏览器，Android常用布局样式

    Android开发工程师文集-Fragment,适配器,轮播图,ScrollView,Gallery 图片浏览器,Android常用布局样式 Fragment FragmentManager frag ...

  3. CSS（非布局样式）

    CSS(非布局样式) 问题1.CSS样式(选择器)的优先级 1.计算权重 2.!important 3.内联样式比外嵌样式高 4.后写的优先级高 问题2.雪碧图的作用 1.减少 HTTP 请求数,提高 ...

  4. 万能的TextView,实现常用布局样式

    package com.loaderman.textviewdemo; import android.content.Context; import android.content.res.Typed ...

  5. Android布局样式

    本篇介绍一下Android中的几种常用的布局,主要介绍内容有: ·View视图 ·LinearLayout ·RelativeLayout 在介绍布局之前,我们首先要了解视图View的基本属性,因为所 ...

  6. css进阶 01-CSS中的非布局样式

    01-CSS中的非布局样式 #前言 CSS中,有很多非布局样式,这些样式(属性)和与布局无关,包括: 字体.字重.颜色.大小.行高 背景.边框 滚动.换行 装饰性属性(粗体.斜体.下划线)等. 这篇文 ...

  7. XAF响应式布局皮肤界面展示

    XAF为了对手机.平板电脑的支持,增加了新的响应式布局皮肤支持,这个功能已经出来很久了,对于平板电脑.PC的支持已经很不错了,对于手机的界面还不是很完美. 本篇展示一下当前的效果,让有需要的同学.还没 ...

  8. css3 flex流动自适应响应式布局样式类

    1.再说css3 flex 一旦一个容器赋予了display:flex属性,将会有以下特点: 项目无法设置浮动. 列表的样式会被清除. 无法使用vertical-align设置垂直对齐方式. 目前互联 ...

  9. flex 4 布局样式

    Flex 4 样式与布局 第一篇 Flex 4 与自定义布局(Layout) Flex 4/Spark组件架构的新功能之一是可以定制一个容器的布局而不必改变容器本身.您需要做的就是定义一个自定义布局. ...

  10. CSS3学习系列之布局样式（二）

    使用盒布局 在CSS3中,通过box属性来使用盒布局,例子如下: <!DOCTYPE html> <html lang="en"> <head> ...

随机推荐

  1. 从零开始配置vim(20)——模糊查询

    在讲解vim的基础功能的时候,介绍过了vim的各种查询技巧,在同一个文件中进行搜索的话,那些技巧很有用.在多个文件中我们介绍了使用vim自带的 :grep命令进行搜索,使用quickfix 列表进行跳 ...

  2. Python 使用XlsxWriter操作Excel

    在数据处理和报告生成的领域中,Excel 文件一直是广泛使用的标准格式.为了让 Python 开发者能够轻松创建和修改 Excel 文件,XlsxWriter 库应运而生.XlsxWriter 是一个 ...

  3. C/C++ Qt 命令行版网络通信

    通常情况下Qt如果需要建立网络通信则必须依附于图形界面,但如果是新手入门,图形界面则显得太过于繁琐不利于学习原理,如下本人实现了命令行版本的网络通信案例,能够让读者更好的理解Qt是如何创建网络通信套接 ...

  4. ChatGPT 对接微信公众号技术方案实现！

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 9天假期写了8天代码和10篇文章,这个5.1过的很爽! 如假期前小傅哥的计划一样,这个假期开启 ...

  5. Program文件的作用

    Program.cs文件分析 Program.cs文件是至关重要的一个文件,它包含应用程序启动的代码,还可以配置所需要的服务和应用管道的中间件. 需要掌握: 6.0版本前后生成的Program.cs文 ...

  6. springboot log 没落盘

    在配置文件中增加了下面的配置并不起作用. logging.file=/xx/xx.log 是因为在 springboot 2.2 版本之后上面的采纳数已经被废弃,需要用下面新的参数: logging. ...

  7. BoolToStr、TBooleanHelper、Boolean 转 字符串

    方法1:直接使用 BoolToStr procedure TForm3.btn1Click(Sender: TObject); var a, b: Boolean; begin a := True; ...

  8. 鹏程杯子2023 pwn

    主要就是修改stdin的最后几位,使他变为write,然后泄露libc,为所欲为即可. 本人是卡在不知道stdin那里可以修改. 然后使用一下jmp qword rbp这个gadget 0x400a9 ...

  9. Executors.newFixedThreadPool(int nThreads)存在的缺陷

    一般来讲是不推荐直接使用JAVA提供的Executors类来初始化线程池,如果有需要可以自行通过ThreadPoolExecutor来封装进行初始化. 可以用newFixedThreadPool(in ...

  10. SP34020 ADAPET - Ada and Pet 题解

    题目传送门 前置知识 前缀函数与 KMP 算法 解法 经检验 样例,我们发现 \(|S|k\) 并不是最优答案. 考虑利用 luogu P4391 [BOI2009] Radio Transmissi ...