One of our users pointed out the vertical scroll bar in the top half of the RadSplitter displays but is greyed out. If the splitter is collapsed forwards and then moved back, the scroll bar becomes enabled. This issue occurs only in Chrome. The scroll bar appears enabled as expected in Firefox, Opera, and Safari.
I've attached screenshots for all the browsers mentioned above. The related code is below; I stripped out the content in the table elements since it's not relevant to the issue. The RadPane with the ID "radpane_preview" is where the vertical scroll bar isn't working correctly.
<telerik:RadPane ID="radpane_comments_preview" runat="server" Scrolling="None" Height="355px"> <telerik:RadSplitter ID="radsplitter_comments_preview" runat="server" Skin="Office2010Silver" Height="355px"> <telerik:RadPane ID="radpane_comments" runat="server" Scrolling="None" Width="410px"> <table class="item_meta_table"></table> </telerik:RadPane> <telerik:RadSplitBar ID="radsplitbar_comments_preview" runat="server" CollapseMode="Forward" /> <telerik:RadPane ID="radpane_preview" runat="server" > <TheXXX:TheItemPreview ID="TheItemPreview" runat="server" Scrolling="Y"/> </telerik:RadPane> </telerik:RadSplitter></telerik:RadPane><telerik:RadSplitBar ID="radsplitbar_top_bottom" runat="server" CollapseMode="Forward" /><telerik:RadPane ID="radpane_bottom" runat="server" Scrolling="None"> <telerik:RadSplitter ID="radsplitter_bottom" runat="server" Skin="Office2010Silver"> <telerik:RadPane ID="radpane_meta" runat="server" Width="410px"> <TheXXX:TheItemMeta ID="TheItemMeta" runat="server" /> </telerik:RadPane> <telerik:RadSplitBar ID="radsplitbar_meta_content" runat="server" CollapseMode="Forward" /> <telerik:RadPane ID="radpane_content" runat="server" Scrolling="Y"> <table class="xxxTable"></table> <asp:PlaceHolder ID="contentPlaceholder" runat="server" /> </telerik:RadPane> </telerik:RadSplitter></telerik:RadPane>
Any thoughts as to why this happens in Chrome?
Thanks!
4 Answers, 1 is accepted
0
Hi Amy,
I tested the provided code but was not able to replicate the reported behavior with it. I am attaching my test page to this reply - can you modify it up to a point where the problem occurs and send it so we can investigate the problem further?
Regards,
Vessy
Telerik by Progress
I tested the provided code but was not able to replicate the reported behavior with it. I am attaching my test page to this reply - can you modify it up to a point where the problem occurs and send it so we can investigate the problem further?
Regards,
Vessy
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which
deliver the business app essential building blocks - a grid component,
data visualization (charts) and form elements.
0
Amy
Top achievements
Rank 1
Rank 1
answered on 13 Dec 2016, 07:05 PM
Hi Vessy,
I modified the aspx and C# file you provided, and was able to duplicate the issue. However, I did have to add more code. I replaced the line "<TheXXX:TheItemPreview ID="TheItemPreview" runat="server" Scrolling="Y"/>" with the actual contents from the user control. The user control contains another RadSplitter, and sets the height to 320px. In Chrome, the vertical scrollbar is greyed out unless you move RadSplitBar; the scrollbar works correctly in Opera, Firefox, and Safari.
Here is the modified code...
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Splitter.aspx.cs" Inherits="Splitter" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head id="head" runat="server"> <title></title> <style> html, body, form { width: 100%; height: 100%; margin:0; padding:0; } </style></head><body> <form id="frmBase" runat="server"> <telerik:RadScriptManager ID="ScmAll" runat="server"> </telerik:RadScriptManager> <div style="height: 100%"> <telerik:RadSplitter ID="radsplitter_item" runat="server" Orientation="Horizontal" Skin="Office2010Silver" Height="1400px" Width="100%" VisibleDuringInit="false"> <telerik:RadPane ID="radpane_info" runat="server" Height="28px" Width="100%"> info pane </telerik:RadPane> <telerik:RadPane ID="radpane_comments_preview" runat="server" Scrolling="None" Height="355px"> <telerik:RadSplitter ID="radsplitter_comments_preview" runat="server" Skin="Office2010Silver" Height="355px"> <telerik:RadPane ID="radpane_comments" runat="server" Scrolling="None" Width="410px"> comment pane </telerik:RadPane> <telerik:RadSplitBar ID="radsplitbar_comments_preview" runat="server" CollapseMode="Forward" /> <telerik:RadPane ID="radpane_preview" runat="server" > <telerik:RadSplitter ID="radsplitterPreview" runat="server" Skin="Office2010Silver" Width="99%" Height="320px"> <telerik:RadPane ID="radpaneItem" runat="server" Scrolling="Both"> Diam et ipsum viverra tortor lorem libero a ut ultricies sit nec ipsum consectetur hendrerit quam consectetur mattis consectetur lacinia et. Dolor amet sit hendrerit sed donec arcu nam consectetur. Diam sed porta quam lorem amet congue amet congue a eget ligula nam lectus ipsum ac lorem vitae donec. Mollis consectetur libero arcu dolor sit hendrerit nam ultricies ut nec lacinia lorem maecenas adipiscing amet porta sed enim lectus sit viverra sed nam. Egestas et sit ut amet enim lorem adipiscing sit diam ipsum lorem. Egestas mauris arcu nec ac quam ligula elit dolor amet consectetur viverra sed donec ipsum consectetur a porta tincidunt congue nec sit tortor. Ac sit diam ipsum hendrerit consectetur ipsum congue vitae amet hendrerit ut amet libero a ante ligula et libero consectetur congue ligula. Tortor arcu ut mollis et donec quam maecenas arcu. Ante amet mollis ut lorem sed amet et. Mattis maecenas ipsum ac libero mattis dolor consectetur porta nec egestas eget sed eget lectus sed a. Vehicula amet egestas lorem mattis egestas tortor sit donec maecenas consectetur arcu donec eget egestas vitae congue a eget hendrerit lorem nam. Hendrerit eget amet consectetur amet mauris maecenas adipiscing sit ultricies augue vitae. Donec sit congue sit vehicula libero ac diam. Ipsum non tortor donec egestas praesent et sit libero sed a nam amet non. A dolor praesent diam lorem consectetur donec et ac ligula arcu lectus diam ipsum sit mattis ipsum nam. Consectetur sit eget sed lorem ut tortor mattis ante tortor ipsum praesent consectetur eget sit dolor congue porta. Ipsum libero praesent donec hendrerit a sit consectetur lacinia consectetur egestas donec a vehicula. Lorem praesent viverra amet consectetur libero praesent congue a congue donec ut consectetur arcu ligula tortor donec viverra. Maecenas amet donec mollis consectetur a ultricies diam lorem adipiscing tortor consectetur vehicula consectetur nec. Sit amet porta dolor amet ac a amet et. Diam et ipsum viverra tortor lorem libero a ut ultricies sit nec ipsum consectetur hendrerit quam consectetur mattis consectetur lacinia et. Dolor amet sit hendrerit sed donec arcu nam consectetur. Diam sed porta quam lorem amet congue amet congue a eget ligula nam lectus ipsum ac lorem vitae donec. Mollis consectetur libero arcu dolor sit hendrerit nam ultricies ut nec lacinia lorem maecenas adipiscing amet porta sed enim lectus sit viverra sed nam. Egestas et sit ut amet enim lorem adipiscing sit diam ipsum lorem. Egestas mauris arcu nec ac quam ligula elit dolor amet consectetur viverra sed donec ipsum consectetur a porta tincidunt congue nec sit tortor. Ac sit diam ipsum hendrerit consectetur ipsum congue vitae amet hendrerit ut amet libero a ante ligula et libero consectetur congue ligula. Tortor arcu ut mollis et donec quam maecenas arcu. Ante amet mollis ut lorem sed amet et. Mattis maecenas ipsum ac libero mattis dolor consectetur porta nec egestas eget sed eget lectus sed a. Vehicula amet egestas lorem mattis egestas tortor sit donec maecenas consectetur arcu donec eget egestas vitae congue a eget hendrerit lorem nam. Hendrerit eget amet consectetur amet mauris maecenas adipiscing sit ultricies augue vitae. Donec sit congue sit vehicula libero ac diam. Ipsum non tortor donec egestas praesent et sit libero sed a nam amet non. A dolor praesent diam lorem consectetur donec et ac ligula arcu lectus diam ipsum sit mattis ipsum nam. Consectetur sit eget sed lorem ut tortor mattis ante tortor ipsum praesent consectetur eget sit dolor congue porta. Ipsum libero praesent donec hendrerit a sit consectetur lacinia consectetur egestas donec a vehicula. Lorem praesent viverra amet consectetur libero praesent congue a congue donec ut consectetur arcu ligula tortor donec viverra. Maecenas amet donec mollis consectetur a ultricies diam lorem adipiscing tortor consectetur vehicula consectetur nec. Sit amet porta dolor amet ac a amet et. Diam et ipsum viverra tortor lorem libero a ut ultricies sit nec ipsum consectetur hendrerit quam consectetur mattis consectetur lacinia et. Dolor amet sit hendrerit sed donec arcu nam consectetur. Diam sed porta quam lorem amet congue amet congue a eget ligula nam lectus ipsum ac lorem vitae donec. Mollis consectetur libero arcu dolor sit hendrerit nam ultricies ut nec lacinia lorem maecenas adipiscing amet porta sed enim lectus sit viverra sed nam. Egestas et sit ut amet enim lorem adipiscing sit diam ipsum lorem. Egestas mauris arcu nec ac quam ligula elit dolor amet consectetur viverra sed donec ipsum consectetur a porta tincidunt congue nec sit tortor. Ac sit diam ipsum hendrerit consectetur ipsum congue vitae amet hendrerit ut amet libero a ante ligula et libero consectetur congue ligula. Tortor arcu ut mollis et donec quam maecenas arcu. Ante amet mollis ut lorem sed amet et. Mattis maecenas ipsum ac libero mattis dolor consectetur porta nec egestas eget sed eget lectus sed a. Vehicula amet egestas lorem mattis egestas tortor sit donec maecenas consectetur arcu donec eget egestas vitae congue a eget hendrerit lorem nam. Hendrerit eget amet consectetur amet mauris maecenas adipiscing sit ultricies augue vitae. Donec sit congue sit vehicula libero ac diam. Ipsum non tortor donec egestas praesent et sit libero sed a nam amet non. A dolor praesent diam lorem consectetur donec et ac ligula arcu lectus diam ipsum sit mattis ipsum nam. Consectetur sit eget sed lorem ut tortor mattis ante tortor ipsum praesent consectetur eget sit dolor congue porta. Ipsum libero praesent donec hendrerit a sit consectetur lacinia consectetur egestas donec a vehicula. Lorem praesent viverra amet consectetur libero praesent congue a congue donec ut consectetur arcu ligula tortor donec viverra. Maecenas amet donec mollis consectetur a ultricies diam lorem adipiscing tortor consectetur vehicula consectetur nec. Sit amet porta dolor amet ac a amet et. Diam et ipsum viverra tortor lorem libero a ut ultricies sit nec ipsum consectetur hendrerit quam consectetur mattis consectetur lacinia et. Dolor amet sit hendrerit sed donec arcu nam consectetur. Diam sed porta quam lorem amet congue amet congue a eget ligula nam lectus ipsum ac lorem vitae donec. Mollis consectetur libero arcu dolor sit hendrerit nam ultricies ut nec lacinia lorem maecenas adipiscing amet porta sed enim lectus sit viverra sed nam. Egestas et sit ut amet enim lorem adipiscing sit diam ipsum lorem. Egestas mauris arcu nec ac quam ligula elit dolor amet consectetur viverra sed donec ipsum consectetur a porta tincidunt congue nec sit tortor. Ac sit diam ipsum hendrerit consectetur ipsum congue vitae amet hendrerit ut amet libero a ante ligula et libero consectetur congue ligula. Tortor arcu ut mollis et donec quam maecenas arcu. Ante amet mollis ut lorem sed amet et. Mattis maecenas ipsum ac libero mattis dolor consectetur porta nec egestas eget sed eget lectus sed a. Vehicula amet egestas lorem mattis egestas tortor sit donec maecenas consectetur arcu donec eget egestas vitae congue a eget hendrerit lorem nam. Hendrerit eget amet consectetur amet mauris maecenas adipiscing sit ultricies augue vitae. Donec sit congue sit vehicula libero ac diam. Ipsum non tortor donec egestas praesent et sit libero sed a nam amet non. A dolor praesent diam lorem consectetur donec et ac ligula arcu lectus diam ipsum sit mattis ipsum nam. Consectetur sit eget sed lorem ut tortor mattis ante tortor ipsum praesent consectetur eget sit dolor congue porta. Ipsum libero praesent donec hendrerit a sit consectetur lacinia consectetur egestas donec a vehicula. Lorem praesent viverra amet consectetur libero praesent congue a congue donec ut consectetur arcu ligula tortor donec viverra. Maecenas amet donec mollis consectetur a ultricies diam lorem adipiscing tortor consectetur vehicula consectetur nec. Sit amet porta dolor amet ac a amet et. Diam et ipsum viverra tortor lorem libero a ut ultricies sit nec ipsum consectetur hendrerit quam consectetur mattis consectetur lacinia et. Dolor amet sit hendrerit sed donec arcu nam consectetur. Diam sed porta quam lorem amet congue amet congue a eget ligula nam lectus ipsum ac lorem vitae donec. Mollis consectetur libero arcu dolor sit hendrerit nam ultricies ut nec lacinia lorem maecenas adipiscing amet porta sed enim lectus sit viverra sed nam. Egestas et sit ut amet enim lorem adipiscing sit diam ipsum lorem. Egestas mauris arcu nec ac quam ligula elit dolor amet consectetur viverra sed donec ipsum consectetur a porta tincidunt congue nec sit tortor. Ac sit diam ipsum hendrerit consectetur ipsum congue vitae amet hendrerit ut amet libero a ante ligula et libero consectetur congue ligula. Tortor arcu ut mollis et donec quam maecenas arcu. Ante amet mollis ut lorem sed amet et. Mattis maecenas ipsum ac libero mattis dolor consectetur porta nec egestas eget sed eget lectus sed a. Vehicula amet egestas lorem mattis egestas tortor sit donec maecenas consectetur arcu donec eget egestas vitae congue a eget hendrerit lorem nam. Hendrerit eget amet consectetur amet mauris maecenas adipiscing sit ultricies augue vitae. Donec sit congue sit vehicula libero ac diam. Ipsum non tortor donec egestas praesent et sit libero sed a nam amet non. A dolor praesent diam lorem consectetur donec et ac ligula arcu lectus diam ipsum sit mattis ipsum nam. Consectetur sit eget sed lorem ut tortor mattis ante tortor ipsum praesent consectetur eget sit dolor congue porta. Ipsum libero praesent donec hendrerit a sit consectetur lacinia consectetur egestas donec a vehicula. Lorem praesent viverra amet consectetur libero praesent congue a congue donec ut consectetur arcu ligula tortor donec viverra. Maecenas amet donec mollis consectetur a ultricies diam lorem adipiscing tortor consectetur vehicula consectetur nec. Sit amet porta dolor amet ac a amet et. Diam et ipsum viverra tortor lorem libero a ut ultricies sit nec ipsum consectetur hendrerit quam consectetur mattis consectetur lacinia et. Dolor amet sit hendrerit sed donec arcu nam consectetur. Diam sed porta quam lorem amet congue amet congue a eget ligula nam lectus ipsum ac lorem vitae donec. Mollis consectetur libero arcu dolor sit hendrerit nam ultricies ut nec lacinia lorem maecenas adipiscing amet porta sed enim lectus sit viverra sed nam. Egestas et sit ut amet enim lorem adipiscing sit diam ipsum lorem. Egestas mauris arcu nec ac quam ligula elit dolor amet consectetur viverra sed donec ipsum consectetur a porta tincidunt congue nec sit tortor. Ac sit diam ipsum hendrerit consectetur ipsum congue vitae amet hendrerit ut amet libero a ante ligula et libero consectetur congue ligula. Tortor arcu ut mollis et donec quam maecenas arcu. Ante amet mollis ut lorem sed amet et. Mattis maecenas ipsum ac libero mattis dolor consectetur porta nec egestas eget sed eget lectus sed a. Vehicula amet egestas lorem mattis egestas tortor sit donec maecenas consectetur arcu donec eget egestas vitae congue a eget hendrerit lorem nam. Hendrerit eget amet consectetur amet mauris maecenas adipiscing sit ultricies augue vitae. Donec sit congue sit vehicula libero ac diam. Ipsum non tortor donec egestas praesent et sit libero sed a nam amet non. A dolor praesent diam lorem consectetur donec et ac ligula arcu lectus diam ipsum sit mattis ipsum nam. Consectetur sit eget sed lorem ut tortor mattis ante tortor ipsum praesent consectetur eget sit dolor congue porta. Ipsum libero praesent donec hendrerit a sit consectetur lacinia consectetur egestas donec a vehicula. Lorem praesent viverra amet consectetur libero praesent congue a congue donec ut consectetur arcu ligula tortor donec viverra. Maecenas amet donec mollis consectetur a ultricies diam lorem adipiscing tortor consectetur vehicula consectetur nec. Sit amet porta dolor amet ac a amet et. </telerik:RadPane> </telerik:RadSplitter> </telerik:RadPane> </telerik:RadSplitter> </telerik:RadPane> <telerik:RadSplitBar ID="radsplitbar_top_bottom" runat="server" CollapseMode="Forward" /> <telerik:RadPane ID="radpane_bottom" runat="server" Scrolling="None"> <telerik:RadSplitter ID="radsplitter_bottom" runat="server" Skin="Office2010Silver"> <telerik:RadPane ID="radpane_meta" runat="server" Width="410px"> meta data pane </telerik:RadPane> <telerik:RadSplitBar ID="radsplitbar_meta_content" runat="server" CollapseMode="Forward" /> <telerik:RadPane ID="radpane_content" runat="server" Scrolling="Y"> user control placeholder pane <asp:PlaceHolder ID="contentPlaceholder" runat="server" /> </telerik:RadPane> </telerik:RadSplitter> </telerik:RadPane> </telerik:RadSplitter> </div> </form></body></html>Thank you for your help!
0
Amy
Top achievements
Rank 1
Rank 1
answered on 13 Dec 2016, 07:12 PM
I forgot I had that much fake text in the aspx file. The issue can be reproduced with 2-3 paragraphs. It seems if the height of the content is greater than the height of the RadPane then the scrollbar won't work properly in Chrome.
0
Hi Amy,
Thank you for the provided reproduction code. The issue is related to the fact that you are passing heigh to a nested Splitter, which by design inherits the heigh of its parent RadPane. In order to size the Splitter manually, you need to make sure its ResizeWithParentPane property is set to "false":
http://docs.telerik.com/devtools/aspnet-ajax/controls/splitter/layout/nesting-splitters
Please, note also that using a Splitter with only one RadPane is highly not recomended and not supported scenario. In case this configuration is used in you actual application (but not only for the test) I would advice to revise it.
Kind regards,
Vessy
Telerik by Progress
Thank you for the provided reproduction code. The issue is related to the fact that you are passing heigh to a nested Splitter, which by design inherits the heigh of its parent RadPane. In order to size the Splitter manually, you need to make sure its ResizeWithParentPane property is set to "false":
http://docs.telerik.com/devtools/aspnet-ajax/controls/splitter/layout/nesting-splitters
Please, note also that using a Splitter with only one RadPane is highly not recomended and not supported scenario. In case this configuration is used in you actual application (but not only for the test) I would advice to revise it.
Kind regards,
Vessy
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which
deliver the business app essential building blocks - a grid component,
data visualization (charts) and form elements.