从上一篇关于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. C/C++ 实现FTP文件上传下载

    FTP(文件传输协议)是一种用于在网络上传输文件的标准协议.它属于因特网标准化的协议族之一,为文件的上传.下载和文件管理提供了一种标准化的方法,在Windows系统中操作FTP上传下载可以使用WinI ...

  2. 3.1 DLL注入：常规远程线程注入

    动态链接库注入技术是一种特殊的技术,它允许在运行的进程中注入DLL动态链接库,从而改变目标进程的行为.DLL注入的实现方式有许多,典型的实现方式为远程线程注入,该注入方式的注入原理是利用了Window ...

  3. 深空物联网通信中视频流的智能多路TCP拥塞控制｜文献阅读｜文献分析和学习｜拥塞控制｜MPTCP｜SVC

    前言 那么这里博主先安利一些干货满满的专栏了! 首先是博主的高质量博客的汇总,这个专栏里面的博客,都是博主最最用心写的一部分,干货满满,希望对大家有帮助. 高质量博客汇总https://blog.cs ...

  4. 戴尔R7920工作站利用PVE开启vGPU，实现工作站虚拟化（ShareStation）

    介绍 本文介绍了使用Proxmox VE(PVE) + DoraCloud,将一台Dell R7920图形工作站(配置有NVIDIA RTX A6000显卡)实现工作站虚拟化.可以满足多个设计用户同时 ...

  5. Git 简明教程（一）

    版本控制工具,早期的vss tfs svn等,这些应该是老一辈程序员常用的工具.目前 git 已经在版本控制领域占主流的地位,因为国外的github 和国内的码云 gitee 均用的是git. git ...

  6. TValue 的 TTypeKind 的自动转换

    首先官方的定义: TTypeKind = (tkUnknown, tkInteger, tkChar, tkEnumeration, tkFloat, tkString, tkSet, tkClass ...

  7. .NET 云原生架构师训练营（模块二 基础巩固 REST && RESTful）--学习笔记

    2.3.1 Web API -- REST && RESTful 什么是 REST,什么是 RESTful RESTful API 设计 RESTful 成熟度模型 什么是 REST, ...

  8. JS Leetcode 278. 第一个错误的版本 题解分析

    壹 ❀ 引 本题来自LeetCode的278. 第一个错误的版本,难度简单,端午节就应该做点容易的题目缓解心情,题目描述如下: 你是产品经理,目前正在带领一个团队开发新的产品.不幸的是,你的产品的最新 ...

  9. ES6学习 第六章 数值的扩展

    前言 本章介绍数值的扩展.新增了很多方法,有些不常用的方法了解即可. 本章原文链接:数值的扩展 进制表示法 ES6 提供了二进制和八进制数值的新的写法,分别用前缀0b(或0B)和0o(或0O)表示. ...

  10. NC17508 指纹锁

    题目链接 题目 题目描述 ​ HA实验有一套非常严密的安全保障体系,在HA实验基地的大门,有一个指纹锁. ​ 该指纹锁的加密算法会把一个指纹转化为一个不超过1e7的数字,两个指纹数值之差越小,就说明两 ...