This is a migrated thread and some comments may be shown as answers.

invisible horizontal scrollbar in edge

7 Answers 116 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ryan
Top achievements
Rank 1
Ryan asked on 05 Aug 2018, 07:28 PM
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>

7 Answers, 1 is accepted

Sort by
0
Tsvetomir
Telerik team
answered on 08 Aug 2018, 04:29 PM
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.
0
Ryan
Top achievements
Rank 1
answered on 08 Aug 2018, 05:46 PM

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

0
Tsvetomir
Telerik team
answered on 10 Aug 2018, 10:09 AM
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.
0
Keith
Top achievements
Rank 2
answered on 12 Mar 2019, 04:31 PM

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 

0
S
Top achievements
Rank 1
answered on 13 Apr 2019, 04:50 PM

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

0
Attila Antal
Telerik team
answered on 17 Apr 2019, 05:12 PM
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.
0
S
Top achievements
Rank 1
answered on 17 Apr 2019, 07:36 PM

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

 

 

Tags
Grid
Asked by
Ryan
Top achievements
Rank 1
Answers by
Tsvetomir
Telerik team
Ryan
Top achievements
Rank 1
Keith
Top achievements
Rank 2
S
Top achievements
Rank 1
Attila Antal
Telerik team
Share this question
or