invisible horizontal scrollbar in edge

[Ryan]

Hi,

<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>

[Tsvetomir]

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

[Ryan]

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

[Tsvetomir]

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

[Vijay]

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 

[S]

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

[Attila Antal]

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

[S]

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