invisible horizontal scrollbar in edge

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

    Posted 05 Aug 2018 Link to this post

    Hi,

    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">
                                                <Columns>
                                                    <telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" EnableHeaderContextMenu="false"></telerik:GridClientSelectColumn>
                                                    <telerik:GridTemplateColumn UniqueName="FileStatus" SortExpression="FileStatus" HeaderText="Status" DataField="FileStatus" FilterCheckListEnableLoadOnDemand="true">
                                                        <ItemTemplate>
                                                            <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" />
                                                        </ItemTemplate>
                                                    </telerik:GridTemplateColumn>
                                                    <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" />
                                                    </Columns>
                                            </MasterTableView>
                                            <ClientSettings ReorderColumnsOnClient="true" >
                                                <Scrolling AllowScroll="True" ScrollHeight="100%" UseStaticHeaders="True"  FrozenColumnsCount="2"></Scrolling>
                                                <Selecting AllowRowSelect="True" EnableDragToSelectRows="false"></Selecting>
                                            </ClientSettings>
                                            <PagerStyle AlwaysVisible="true" PageSizeControlType="None"></PagerStyle>
                                            <FilterMenu EnableEmbeddedSkins="false" CssClass="RadFilter_Bootstrap" ></FilterMenu>
                                            <HeaderContextMenu EnableEmbeddedSkins="false" CssClass="RadMenu_Bootstrap" ></HeaderContextMenu>
                                        </telerik:RadGrid>
                                    </div>
  2. Tsvetomir
    Admin
    Tsvetomir avatar
    216 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 (RadGrid-HorizontalScroll.zip). 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,
    Tsvetomir
    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
    Admin
    Tsvetomir avatar
    216 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,
    Tsvetomir
    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 

  6. S
    S avatar
    6 posts
    Member since:
    Nov 2010

    Posted 13 Apr in reply to Ryan Link to this post

    Dear Ryan,

     

    I wonder if you ever had a satisfactory solution on this issue. I have exactly the same. Sometimes the scrollbar is working OK and sometimes it goes away after a reload or it never appears. its only in Edge. not in chrome. indeed you can still scroll by clicking on that mal formatted scrollbar but its a bit weird that it does not have the scrollbar selector / position indicator.

    Please let me know if you had some clue on this. Its a bit hard to find an answer as many issues are talking about no scroll bar. but in this case the scrollbar is there but its bad formatted , a kind of incomplete.

    Kind regards,

    Siebe

  7. Attila Antal
    Admin
    Attila Antal avatar
    262 posts

    Posted 17 Apr Link to this post

    Hi Siebe,

    I believe that you are experiencing the same issue that was reported a little while ago with the horizontal scrollbar in Edge. Check out the workaround provided in the following Bug item reported in our Feedback Portal and see if that will help fix the issue: Horiozontal Scrollbar not visible in Microsoft Edge when RadGrid has scrolling and Frozen columns enabled

    Kind regards,
    Attila Antal
    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.
  8. S
    S avatar
    6 posts
    Member since:
    Nov 2010

    Posted 17 Apr in reply to Attila Antal Link to this post

    dear Attila

     

    This indeed solves the issue in already two situations. In both situations the grid loads with the correct display of the horizontal scrollbar. but after some manipulation of the grid (sort) the scroll bar looses its correct formatting and works but has no scrollbar indicator left. After applying your style suggestion with 18px this behavior is not repeating and the scroll bar remains with the correct layout. Thanks for you reply and worry to help me with this. My customers will be happy to see the correct scrollbar in Edge again.

    Kind regards

     

     

Back to Top