从上一篇关于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. 强烈推荐：数据标注平台doccano----简介、安装、使用、踩坑记录

    1.doccano的安装与初始配置 1.1 doccano的用途 document classification 文本分类 sequence labeling 序列标注,用于命名实体识别 sequen ...

  2. Flask Echarts 实现历史图形查询

    Flask前后端数据动态交互涉及用户界面与服务器之间的灵活数据传递.用户界面使用ECharts图形库实时渲染数据.它提供了丰富多彩.交互性强的图表和地图,能够在网页上直观.生动地展示数据.EChart ...

  3. 【译】VisualStudio 17.9预览3带来了令人兴奋的代码搜索改变

    随着 VisualStudio17.9预览版3的发布,我们为代码搜索(也称为 All-In-One Search)带来了一些令人兴奋的增强.自从我们上次更新搜索体验以来,我们一直在努力改进体验,并想出 ...

  4. Hadoop的stop-all无法关闭集群原因及解决方案

    问题现象:在服务器上长时间运行hadoop之后,如果运行stop-all.sh,会发现: [root@node1 sbin]# stop-all.shThis script is Deprecated ...

  5. Visual Studio部署matplotlib绘图库的C++版本

      本文介绍在Visual Studio软件中配置.编译C++环境下matplotlibcpp库的详细方法.   matplotlibcpp库是一个C++环境下的绘图工具,其通过调用Python接口, ...

  6. CF1902

    A 只要不是全 \(1\) 即可. B 二分完成天数. C \(x\) 取差的 \(gcd\),\(a_{n+1}\) 见缝插针. D 用一个 map 记录按原始操作序列,要走到 \((x,y)\) ...

  7. Yum安装的Nginx安装新模块解决办法

    Nginx版本1.22 Yum安装 Step1 去官网下载对应版本的源码包 Nginx源码包官网下载地址 Step2 上传到服务器 tar -xf nginx-1.22.1.tar.gz cd ngi ...

  8. G water testing题解

    G water testing 题意:给你一个多边形(可能是凸多边形,也可能是凹多边形),问该多边形内有多少个整数点(不包含边界). 思路:皮克定理 + 叉乘计算三角形面积:皮克定理是指一个计算点阵中 ...

  9. DFS算法模板（2488:A Knight's Journey）

    DFS算法(C++版本) 题目一: 链接:http://bailian.openjudge.cn/practice/2488/ 解析思路: 骑士找路就是基本的DFS,用递归不断找到合适的路,找不到就回 ...

  10. win32-GetActiveWindow和GetForegroundWindow

    最近被这两个api搞得有点晕,故查阅了相关的资料. 这篇文章解释的很好:https://devblogs.microsoft.com/oldnewthing/20081006-00/?p=20643 ...