如果在网格中或单独使用页导航,并且基础数据源中的总行数与所选页面大小完全匹配,则下拉列表将显示为空白。只有当页面大小列表中没有空的“All”选项时,才会发生这种情况。通过它的外观,我猜有代码选择“全部”,每当总数匹配所选的页面大小选项,但它不选择“全部”选项不在列表中。如果行数等于页面大小,该功能应该选择用户选择的页面大小,而不是尝试将自己重置为All。下面的repl显示了这个bug:
https://blazorrepl.telerik.com/mxOIEBPW09nKgO9A35一个>
在运行repl时,将页面大小更改为5,然后再更改为10。您将看到下拉菜单选择了一个空白项。应该是10。
我们有启用寻呼机的网格。有些网格位于EditForm中。
page
我们不使用GridPagerTemplate。
嗨。
当你有一个TelerikGrid, OnRead事件进行异步调用时,TelerikGrid自带的寻呼机在较窄的设备上不显示移动视图。
我在这里创建了一个blazor回复:<一个href="//www.aliitrade.com/blazorrepl/mxOPbEuZ29PQRAQk02" rel="ugc">https://blazorrepl.telerik.com/mxOPbEuZ29PQRAQk02一个>
如果您在浏览器中查看repl,请打开开发工具并切换设备工具栏,并将视口宽度设置为320px左右。如果它加载到预览中,在第一次在正常屏幕尺寸上渲染后,那么寻呼机将适应。要查看错误,请转到代码选项卡,然后转到预览选项卡,让它在移动宽度上进行初始渲染。你会看到这样的内容:
这是一个目前在我自己的网站上直播的问题,这是由客户报告给我的。我相信这只发生在使用网格的OnRead,并在其中进行异步调用时(我在repl中用Task.Delay表示)
我在生产中使用最早的3.5.0,但可以在最新的3.7.0上复制它。
我在这里做了一个简单的blazor repl演示:<一个style="color: #252525" href="//www.aliitrade.com/blazorrepl/mmlYatun39gTFEgO21" rel="ugc">https://blazorrepl.telerik.com/mmlYatun39gTFEgO21一个>
如您所见,TotalCount为10,当前PageSize也是10。当这些值匹配时,“每页条目”下拉框中的值就不存在了。选择任何其他值,它将显示(对于5、20、40)。回到10,这个值又消失了。
我使用寻呼机的以下页面大小列表:
private static readonly List_pageSizeSelectorItems = new (){ 5, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 40, 50, 60, 70, 80, 90, 100 };
下拉菜单没有显示在正确的方向上,并且溢出了屏幕。
---
管理编辑
---
目前一个可能的解决方法是为pagesize下拉菜单的内部元素设置一些最大高度。您可以使用CSS实现这一点。因此,当列表较长时,弹出框将保持最大高度,并出现滚动条。例如:<一个href="//www.aliitrade.com/blazorrepl/mcEiYSFO39g6rfSE36" rel="ugc">https://blazorrepl.telerik.com/mcEiYSFO39g6rfSE36一个>。此请求的目的是能够选择寻呼机组件的键盘导航流程:
-方向键(当前)
- TAB导航(禁用方向键导航,但在TAB序列中包含分页中的所有元素)
配置应该在分页器和集成它的组件中可用。
我们在寻呼机的导航按钮上遇到了以下可访问性问题:
代码片段:
<<跨度类="hljs-name" style="color: #0000ff">一个跨度><跨度类="hljs-attr" style="color: #ff0000">材料指数跨度>=<跨度类="hljs-string" style="color: #a31515">“0”跨度><跨度类="hljs-attr" style="color: #ff0000">aria-label跨度>=<跨度类="hljs-string" style="color: #a31515">“翻到第一页”跨度><跨度类="hljs-attr" style="color: #ff0000">标题跨度>=<跨度类="hljs-string" style="color: #a31515">“翻到第一页”跨度><跨度类="hljs-attr" style="color: #ff0000">类跨度>=<跨度类="hljs-string" style="color: #a31515">"k-link k- paging -nav k-state-disabled k- paging -first"跨度><跨度类="hljs-attr" style="color: #ff0000">aria-disabled跨度>=<跨度类="hljs-string" style="color: #a31515">“真正的”跨度><跨度类="hljs-attr" style="color: #ff0000">tabindex跨度>=<跨度类="hljs-string" style="color: #a31515">“1”跨度>>跨度><跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">跨度跨度><跨度类="hljs-attr" style="color: #ff0000">类跨度>=<跨度类="hljs-string" style="color: #a31515">“k-icon k-i-arrow-end-left”跨度><跨度类="hljs-attr" style="color: #ff0000">角色跨度>=<跨度类="hljs-string" style="color: #a31515">“演示”跨度>>跨度><跨度类="hljs-tag" style="color: #0000ff"><跨度类="hljs-name" style="color: #0000ff">跨度跨度>>跨度><跨度类="hljs-tag" style="color: #0000ff"><跨度类="hljs-name" style="color: #0000ff">一个跨度>>跨度>
如何修复-修复以下问题:
不能使用ARIA属性,添加角色属性或使用不同的元素:ARIA -label
一个可访问性问题是发现寻呼机列表时,灯塔在Chrome浏览器扫描。
表格和列表跨度><跨度类="lh-audit-group__description" style="min-width: 0px; min-height: 0px; color: var(--color-gray-600); font-family: ".SFNSDisplay-Regular", "Helvetica Neue", "Lucida Grande", sans-serif; background-color: #ffffff">这些都是使用辅助技术(如屏幕阅读器)改善阅读表格或列表数据体验的机会。跨度>
列出项目(跨度><李>
)并不包含在其中跨度>< ul >
或跨度>< ol >
父元素。跨度>
屏幕阅读器要求列表项(' '或'
'中才能正确显示。跨度>