如何修复Telerik Rad按钮上传功能滚动错位问题

问题根因 #

你使用的RadAsyncUpload控件开启了UploadedFilesRendering="BelowFileInput"配置后，控件内部会自动为选择文件的按钮区域添加*粘性定位（sticky）*样式实现滚动固定效果，但你单独放在另一列的btnUpload按钮没有配置对应的定位规则，因此滚动时两个按钮行为不一致，出现错位遮挡已选文件的问题。

解决方案 #

推荐最简便的方案：直接给包裹两个按钮的row容器添加粘性定位样式，让整行操作栏一起固定在顶部，天然保证两个按钮的对齐和固定行为一致。

调整后代码示例 #

<div class="container">
    <!-- 给该行添加sticky定位样式 -->
    <div class="row" style="padding: 10px 0; position: sticky; top: 0; background: #ffffff; z-index: 100;">
        <div class="col-lg-1" >
            <telerik:RadAsyncUpload RenderMode="Lightweight" 
                                    ID="RadUpload1" 
                                    runat="server" 
                                    MultipleFileSelection="Automatic" 
                                    ManualUpload="False" 
                                    DropZones=".DropZone1" 
                                    OnClientValidationFailed ="OnClientValidationFailed"
                                    PostbackTriggers="btnUpload"
                                    HideFileInput="False"
                                    UploadedFilesRendering="BelowFileInput"
                                    OnClientFilesUploaded="onClientFilesUploaded"
                                    OnClientFileUploading="onClientFileUploading">
                <Localization Select="Select files"></Localization>
            </telerik:RadAsyncUpload>
        </div>
        <div class="col-lg-2">
            <telerik:RadButton RenderMode="Lightweight" runat="server" Text="Upload" ID="btnUpload" Enabled ="false"/>
        </div>
        <div class="col-lg-9"></div>
    </div>
    <div class="DropZone1">
        <p>Drop Files Here</p>
    </div>
</div>

样式说明 #

• position: sticky：实现滚动到顶部时吸附固定的效果
• top: 0：设置固定时距离顶部的距离，可根据页面顶部其他固定元素的高度自行调整
• background: #ffffff：避免固定后透明透出下方内容
• z-index: 100：保证操作栏层级高于其他页面内容，不会被遮挡

如果不想整行固定，也可以单独给btnUpload添加和RadAsyncUpload选择按钮完全一致的sticky定位规则，调整top值和z-index对齐即可。

内容的提问来源于stack exchange，提问作者Sphen Janicek