从上一篇关于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. 19.4 Boost Asio 远程命令执行

    命令执行机制的实现与原生套接字通信一致,仅仅只是在调用时采用了Boost通用接口,在服务端中我们通过封装实现一个run_command函数,该函数用于发送一个字符串命令,并循环等待接收客户端返回的字符 ...

  2. Linux 配置Quota磁盘配额

    由于Linux是一个多用户管理的操作系统,而Linux默认情况下并不限制每个用户使用磁盘空间的大小,假如某个用户疏忽或者恶意占满磁盘空间,将导致系统磁盘无法写入甚至崩溃,为了保证系统磁盘的有足够的剩余 ...

  3. C++自定义sort比较函数的四种方法

    sort函数:对于容器等进行排序,头文件位于<algorithm>中. 普通:可以在sort的第三个参数传入 无参:default = less<>() less<> ...

  4. 2023年多校联训NOIP层测试5

    2023年多校联训NOIP层测试5 T1 糖果 \(10pts\) 首先考虑一些异或的性质: 归零率:\(a \bigoplus a=0\) 恒等律:\(a \bigoplus 0=a\) 交换律:\ ...

  5. Linux常用的20个命令(下)

    无论你是后端程序员还是前端程序员,都避免不了和Linux打交道.上篇介绍了Linux常用的20个命令其中的10个,本文继续介绍剩下的10个命令. 11.man 命令 manual的缩写,即使用手册的意 ...

  6. C语言，函数形参与实参个数不一致问题

    ​ 最近阅读工程代码的时候,同一个函数,不同场景调用时,输入的实参个数不一样,但是编译却没有问题.查看函数的定义,相关的C文件里并没有给形参指定默认值,这就很奇怪了. ​ 最终,发现在函数相关的头文件 ...

  7. 【Unity3D】人机交互Input

    1 前言 ​ Input 是 Unity3D 中用于人机交互的工具类,用户可以调用其 GetKey.GetMousePosition.GetMouseButton.GetAxis.GetButton ...

  8. 基于Android的“哲学家就餐问题”防死锁的设计与实现

    1问题描述 如图1.1,有5个哲学家围着一个大圆桌就餐.哲学家和筷子都按逆时针顺序编号,每个哲学家的编号与他左边的筷子的编号一致. 规定如下: (1)哲学家之间不相互交流: (2)哲学家只做两件事:吃 ...

  9. 之前练手使用基于gin的go web项目

    目录结构: `-- demo |-- cmd | |-- api.go | `-- root.go |-- common | `-- consts | `-- consts.go |-- config ...

  10. Qt5.15.0 升级至 Qt5.15.9 遇到的一些错误

    按照之前我写的文章教程,可以很简单的编译出静态库(仅供学习交流) 编译 windows 上的 qt 静态库 编译出静态库后,替换旧版本的库,见我另一篇文章教程 VS2019 配置 QT 库 之所以没有 ...