invisible horizontal scrollbar in edge

5 posts, 0 answers
  1. Ryan
    Ryan avatar
    8 posts
    Member since:
    Apr 2018

    Posted 05 Aug 2018 Link to this post


    I am having an issue where the horizontal scrollbar disappears at times or returns in the wrong spot. I can still use my mouse and scroll even when it is not visible. The exact symptom is attached in images below. The issue occurs in edge, but not in chrome. I have not checked firefox. Also, the issue appears to go away when I remove the 2 frozen columns, but I really need those. The code for the grid is below, but I did change the uniquenames, sortexpressions, and headertext for privacy. Any ideas on how to fix this is greatly appreciated. Thank you.

    <div style="width:98%;height:73%;background-color:white;">
                                        <telerik:RadGrid RenderMode="Lightweight" ID="gvFilter" runat="server" GridLines="Vertical" AllowMultiRowSelection="true" OnPreRender="gvFilter_PreRender"
                                            AllowSorting="true" AllowPaging="true" GroupingEnabled="false" PageSize="20" Height="100%" OnSortCommand="gvFilter_SortCommand" OnItemDataBound="gvFilter_ItemDataBound"
                                            EnableViewState="true" CssClass="RadGrid_Bootstrap" EnableHeaderContextMenu="true" EnableHeaderContextFilterMenu="true" OnItemCommand="gvFilter_ItemCommand"
                                             EnableEmbeddedSkins="false" AutoGenerateColumns="false" OnNeedDataSource="gvFilter_NeedDataSource" OnItemCreated="gvFilter_ItemCreated"
                                             AllowFilteringByColumn="true" FilterType="HeaderContext" OnFilterCheckListItemsRequested="gvFilter_FilterCheckListItemsRequested" >
                                            <MasterTableView AllowMultiColumnSorting="true" IsFilterItemExpanded="true">
                                                    <telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" EnableHeaderContextMenu="false"></telerik:GridClientSelectColumn>
                                                    <telerik:GridTemplateColumn UniqueName="FileStatus" SortExpression="FileStatus" HeaderText="Status" DataField="FileStatus" FilterCheckListEnableLoadOnDemand="true">
                                                            <asp:HyperLink runat="server" Text='<%# Eval("FileStatus") %>' NavigateUrl='<%# Eval("fkBatchPDFID", "../ViewReport.aspx?id={0}") %>'
                                                                Visible='<%# Eval("FileStatus").ToString() == "Ready" %>' Target="_blank" />
                                                            <asp:Label Text='<%# Eval("FileStatus") %>' Visible='<%# Eval("FileStatus").ToString() != "Ready" %>' runat="server" />
                                                    <telerik:GridBoundColumn UniqueName="Shared" DataField="Shared" SortExpression="Shared" HeaderText="Shared" FilterCheckListEnableLoadOnDemand="true" />
                                                    <telerik:GridBoundColumn UniqueName="A" DataField="A" SortExpression="A" HeaderText="A"  FilterCheckListEnableLoadOnDemand="true" />                        
                                                    <telerik:GridBoundColumn UniqueName="B" DataField="B" SortExpression="B" HeaderText="B"  FilterCheckListEnableLoadOnDemand="true" />
                                                    <telerik:GridBoundColumn UniqueName="C" DataField="C" SortExpression="C" HeaderText="C"  FilterCheckListEnableLoadOnDemand="true"  />
                                                    <telerik:GridBoundColumn UniqueName="D" DataField="D" SortExpression="D" HeaderText="D" FilterCheckListEnableLoadOnDemand="true" />
                                                    <telerik:GridBoundColumn UniqueName="E" DataField="E" SortExpression="E" HeaderText="E" FilterCheckListEnableLoadOnDemand="true" />
                                                    <telerik:GridBoundColumn UniqueName="F" DataField="F" SortExpression="F" HeaderText="F" FilterCheckListEnableLoadOnDemand="true" />
                                                    <telerik:GridBoundColumn UniqueName="G" DataField="G" SortExpression="G" HeaderText="G"  FilterCheckListEnableLoadOnDemand="true" />
                                                    <telerik:GridBoundColumn UniqueName="H" DataField="H" SortExpression="H" HeaderText="H"  FilterCheckListEnableLoadOnDemand="true" />
                                                    <telerik:GridBoundColumn UniqueName="I" DataField="I" SortExpression="I" HeaderText="I" FilterCheckListEnableLoadOnDemand="true" />
                                                    <telerik:GridBoundColumn UniqueName="J" DataField="J" SortExpression="J" HeaderText="J"  FilterCheckListEnableLoadOnDemand="true" />
                                                    <telerik:GridBoundColumn UniqueName="K" DataField="K" SortExpression="K" HeaderText="K"  FilterCheckListEnableLoadOnDemand="true" />
                                                    <telerik:GridBoundColumn UniqueName="L" DataField="L" SortExpression="L" HeaderText="L" FilterCheckListEnableLoadOnDemand="true"/>
                                                    <telerik:GridBoundColumn UniqueName="M" DataField="M" SortExpression="M" HeaderText="M" FilterCheckListEnableLoadOnDemand="true" />
                                                    <telerik:GridBoundColumn UniqueName="N" DataField="N" SortExpression="N" HeaderText="N" FilterCheckListEnableLoadOnDemand="true" />
                                                    <telerik:GridBoundColumn UniqueName="O" DataField="O" SortExpression="O" HeaderText="O" FilterCheckListEnableLoadOnDemand="true" />
                                                    <telerik:GridBoundColumn UniqueName="P" DataField="P" SortExpression="P" HeaderText="P" FilterCheckListEnableLoadOnDemand="true" />
                                                    <telerik:GridBoundColumn UniqueName="Q" DataField="Q" SortExpression="Q" HeaderText="Q" FilterCheckListEnableLoadOnDemand="true" />
                                                    <telerik:GridBoundColumn UniqueName="R" DataField="R" SortExpression="R" HeaderText="R" FilterCheckListEnableLoadOnDemand="true" />          
                                                    <telerik:GridBoundColumn UniqueName="S" DataField="S" SortExpression="S" HeaderText="S" FilterCheckListEnableLoadOnDemand="true" />
                                                    <telerik:GridBoundColumn UniqueName="T" DataField="T" SortExpression="T" HeaderText="T" FilterCheckListEnableLoadOnDemand="true" />
                                                    <telerik:GridBoundColumn UniqueName="U" DataField="U" SortExpression="U" HeaderText="U" FilterCheckListEnableLoadOnDemand="true" />              
                                                    <telerik:GridBoundColumn UniqueName="V" DataField="V" SortExpression="V" HeaderText="V" FilterCheckListEnableLoadOnDemand="true"  />
                                                    <telerik:GridBoundColumn UniqueName="W" DataField="W" SortExpression="W" Display="false" HeaderText="ID1" EnableHeaderContextMenu="false"  />
                                                    <telerik:GridBoundColumn UniqueName="X" DataField="X" SortExpression="X" Display="false" HeaderText="ID2" EnableHeaderContextMenu="false" />
                                            <ClientSettings ReorderColumnsOnClient="true" >
                                                <Scrolling AllowScroll="True" ScrollHeight="100%" UseStaticHeaders="True"  FrozenColumnsCount="2"></Scrolling>
                                                <Selecting AllowRowSelect="True" EnableDragToSelectRows="false"></Selecting>
                                            <PagerStyle AlwaysVisible="true" PageSizeControlType="None"></PagerStyle>
                                            <FilterMenu EnableEmbeddedSkins="false" CssClass="RadFilter_Bootstrap" ></FilterMenu>
                                            <HeaderContextMenu EnableEmbeddedSkins="false" CssClass="RadMenu_Bootstrap" ></HeaderContextMenu>
  2. Tsvetomir
    Tsvetomir avatar
    184 posts

    Posted 08 Aug 2018 Link to this post

    Hi Ryan,

    I have created a fully runnable Web Site project which uses the exact markup you have provided and attached it to my response ( I have tested it in Microsoft Edge (version 40.15063.0.0) and it works well on my side.
    Could you please download and run the sample project to check whether it works as anticipated on your side as well. It would be ideal if you could modify the project and send it back to us for further investigation.

    You may as well check whether the same behavior is seen with the Grid - Scrolling online demo.

    I look forward to hearing from you.

    Kind regards,
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Ryan
    Ryan avatar
    8 posts
    Member since:
    Apr 2018

    Posted 08 Aug 2018 in reply to Tsvetomir Link to this post

    Hi Tsvetomir,

    Thanks for the reply. I loaded up the project you gave me and without making any changes, on first load, it appeared to work as it should, but after the first refresh of the page, the scrollbar disappeared. I have attached the behavior below. I also ran the telerik demo and when the page loads the scrollbar visibility initially flashes at me and then quickly disappears. I am running edge version 42.17134.1.0 so I am not sure if this is the reason, but this issue has been present for a while and likely over different edge versions. 

    Ryan Gray

  4. Tsvetomir
    Tsvetomir avatar
    184 posts

    Posted 10 Aug 2018 Link to this post

    Hi Ryan,

    I have tried to reproduce this issue on my side, but with no luck. I tested out both the demo and my sample are working as expected. I would like to propose a few suggestions which might prove beneficial in this case:
    1. Remove temporarily all columns which have the Display property set to false.
    2. Remove the FrozenColumnsCount property.
    3. Remove the StaticHeaders property.

    Please check whether the issue stems from the above-mentioned properties. 

    Best regards,
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Keith
    Keith avatar
    2 posts
    Member since:
    Apr 2012

    Posted 12 Mar in reply to Tsvetomir Link to this post

    I have noticed the same issue. in my case, the UseStaticHeaders="true" was causing the problem.

    Removing UseStaticHeaders fixed the issue but changed the user experience because the paging is no longer visible 

Back to Top