有没有一种方法可以通过CSS强制一个垂直条停留在我的视图的可见区域?
我正在使用Anvil Works,并在该容器中有一个名为data grid的容器,还有两个容器:data-row-panel - containing my header of the table repeating-panel - containing rows of data.
在实际的代码中,我的竖线位于重复面板的末尾。为了看到垂直条,我需要滚动到年底与水平滚动条。
如何让它悬停在可见区域?在anvil中,很难编辑这个对象的HTML端,因为它们是由anvil代码控制的。
/* Data Grids */
/*styles data-row-panel containing header row to be single row only and add a bar*/
.anvil-role-tonal-data-grid .anvil-data-row-panel {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
min-width: min-content;
overflow-x: hidden;
}
/*styles repeating panel to be single row only and add a bar*/
.anvil-role-tonal-data-grid .repeating-panel {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
overflow-x: hidden;
min-width: min-content;
overflow-y: scroll;/*add vetical bar*/
max-height: 450px;/*max height*/
}
/*container holding the data row and repeating panel
.anvil-role-tonal-data-grid .data-grid-child-panel {
overflow-x: auto !important;
}
代码生成类似于html结构的内容:
<div class="data-grid-child-panel">
<div class="anvil-data-row-panel"></div>
<div class="repeating-panel"></div>
</div>
HTML结构。其余部分由代码控制。
<div class="structure">
<div class="app-bar" anvil-drop-container=".anvil-container" anvil-drop-redirect=".placeholder">
<a class="sidebar-toggle" anvil-if-slot-empty="top-left-btn" anvil-hide-if-slot-empty="left-nav" anvil-drop-slot="top-left-btn" href="javascript:void(0)"><i class="fa fa-bars"></i></a>
<a class="sidebar-toggle anvil-designer-only" anvil-if-slot-empty="top-left-btn" anvil-if-slot-empty="left-nav" anvil-drop-slot="top-left-btn"><i class="fa fa-blank"></i></a>
<div class="top-left-btn" anvil-slot="top-left-btn"></div>
<div class="title" anvil-slot="title">
<div class="placeholder anvil-designer-only" anvil-if-slot-empty="title" anvil-drop-here>Drop title here</div>
</div>
<div class="app-bar-nav" anvil-slot="nav-right">
<div class="placeholder anvil-designer-only" anvil-if-slot-empty="nav-right" anvil-drop-here>Drop a FlowPanel here</div>
</div>
<div style="clear:both"></div>
</div>
<div class="nav-holder">
<div class="left-nav anvil-measure-this" anvil-slot-repeat="left-nav" anvil-drop-container=">.anvil-container">
</div>
<div class="left-nav-placeholder anvil-designer-only" anvil-if-slot-empty="left-nav" anvil-drop-slot="left-nav">
<div class="prompt">To add a sidebar, drop a ColumnPanel here.</div>
</div>
<div class="content">
<div anvil-slot-repeat="default" class="anvil-measure-this"></div>
<div class="placeholder drop-here" anvil-if-slot-empty="default" anvil-drop-slot="default">Drop a ColumnPanel here.</div>
</div>
</div>
<div class="nav-shield"></div>
</div>
<div anvil-drop-default anvil-drop-redirect=".placeholder" anvil-drop-container=".anvil-container"></div>
1条答案
按热度按时间wj8zmpe11#
我找到了解决问题的办法。也许这不是解决问题的最佳方法,但它确实有效。
在我的父容器中,我有标题行和数据行。向父容器添加垂直滚动和高度限制会导致标题和行一起滚动。所以向下滚动意味着标题消失。谢谢你的位置属性提示。
我只是将标题行放在父容器的顶部,并将它的z索引设置在数据行容器的顶部。两个滚动条都是可见的,因为我的父容器仅限于我的可见区域,它们不会移动。