Hi, I have two related issues when using RadSplitters, using Q2 2012. I have nested splitters similar to the last example here: Nested Splitters. In one of the panes (leftmost, which is initially Collapsed="true"), I have two RadMenus and in one other (rightmost), the content of the site. The menus are loaded dynamically after some user input interactions and also the containing pane (leftmost) is dynamically expanded (Collapsed = false) when the menu loading occurs.
1-The hovering color effect of the menus is not the same width than the menu items (as illustrated in attachment). Depending on actions, the effect may be larger and thinner than the menu. This occurs if using a skin or not or if using a custom background color/sprite image in CSS. That issue is not occuring if pane is initially declared a Collapsed="false" in markup. It also occurs when using the RadSPlitBar button to collapse or expand the pane. Looks like the hovering width is calculated too soon.
2-I want one of my RadSplitBar to be not visible (Visible="false") at page initial loading and make it visible when pane is dynamically expanded (as mentioned earlier). When the bar become visible, the Splitter control gets extra and unwanted margin which cause the control to have extra horizontal and vertical scrollers. This issue is occuring in FF and Chrome and is NOT occuring if RadSplitBar is initially declared a visible (Visible="true"). Also, the problem seems to only happen on first load (first load after bar is once visible) since refreshing the content pane after that make the scrollers disapear and clear the issue.
Here is the code in question:
UPDATE: Ive found a partial workaround that seem to fix issue #1 for first page load only (and issue #2 but in FF only). Ive put RadSplitBar1 visible=true and added the following client-side code to collapse the pane and hide the bar at control load. Note that i had to put a timeout delay to make it work. However, issue #1 is still occurring on additional pane collapsing/expanding:
Also, I made more tests with other browsers and Issue #2 also occurs on Opera, Safari for Windows.
UPDATE 2: Regarding issue #1, ive found a simpler replicating scenario, in Opera or Firefox, I just have to pop-up my browser search bar (CTRL+F) which resizes my menu pane (vertical scroller appears which reduces menu width), then the hover effect is larger than menu items. Weird thing, believe it or not, I cant reproduce at all this issue in IE8. Also, when issue occurs, clicking on menu items once will make the hover effect thinner then second time will make it the right width.
TIA
1-The hovering color effect of the menus is not the same width than the menu items (as illustrated in attachment). Depending on actions, the effect may be larger and thinner than the menu. This occurs if using a skin or not or if using a custom background color/sprite image in CSS. That issue is not occuring if pane is initially declared a Collapsed="false" in markup. It also occurs when using the RadSPlitBar button to collapse or expand the pane. Looks like the hovering width is calculated too soon.
2-I want one of my RadSplitBar to be not visible (Visible="false") at page initial loading and make it visible when pane is dynamically expanded (as mentioned earlier). When the bar become visible, the Splitter control gets extra and unwanted margin which cause the control to have extra horizontal and vertical scrollers. This issue is occuring in FF and Chrome and is NOT occuring if RadSplitBar is initially declared a visible (Visible="true"). Also, the problem seems to only happen on first load (first load after bar is once visible) since refreshing the content pane after that make the scrollers disapear and clear the issue.
Here is the code in question:
<
telerik:RadAjaxPanel
ID
=
"RadAjaxPanel1"
runat
=
"server"
Height
=
"100%"
Width
=
"100%"
>
<
telerik:RadSplitter
ID
=
"Radsplitter5"
runat
=
"server"
Skin
=
"WebBlue"
Width
=
"100.5%"
Height
=
"110%"
Orientation
=
"Horizontal"
PanesBorderSize
=
"0"
BorderSize
=
"0"
>
<%-- this is the pane i want collapsed at startup--%>
<
telerik:RadPane
ID
=
"RadPane5"
runat
=
"server"
Height
=
"150px"
Collapsed
=
"true"
>
</
telerik:RadPane
>
<
telerik:RadPane
ID
=
"RadPane6"
runat
=
"server"
>
<
telerik:RadSplitter
ID
=
"Radsplitter6"
runat
=
"server"
Skin
=
"WebBlue"
PanesBorderSize
=
"0"
BorderSize
=
"0"
>
<
telerik:RadPane
ID
=
"RadPane1"
runat
=
"server"
CssClass
=
"MenuPane"
MinWidth
=
"220"
Width
=
"220px"
Height
=
"100%"
Collapsed
=
"false"
>
<
telerik:RadSplitter
ID
=
"Radsplitter2"
runat
=
"server"
Skin
=
"WebBlue"
ResizeWithParentPane
=
"false"
Orientation
=
"Horizontal"
Width
=
"100%"
Height
=
"100%"
PanesBorderSize
=
"0"
BorderSize
=
"0"
>
<
telerik:RadPane
ID
=
"RadPane3"
runat
=
"server"
CssClass
=
"MenuPane2"
Width
=
"100%"
Height
=
"50%"
>
<
telerik:RadMenu
ID
=
"RadMenu2"
runat
=
"server"
Visible
=
"false"
Width
=
"84.7%"
CssClass
=
"menu3"
OnItemClick
=
"RadMenu_ItemClick"
EnableImageSprites
=
"true"
BorderStyle
=
"None"
Flow
=
"Vertical"
>
</
telerik:RadMenu
>
</
telerik:RadPane
>
<
telerik:RadPane
ID
=
"RadPane4"
runat
=
"server"
CssClass
=
"MenuPane3"
Width
=
"100%"
Height
=
"50%"
>
<
telerik:RadMenu
ID
=
"RadMenu3"
runat
=
"server"
Visible
=
"false"
Width
=
"84.7%"
CssClass
=
"menu5"
OnItemClick
=
"RadMenu_ItemClick"
EnableImageSprites
=
"true"
BorderStyle
=
"None"
Flow
=
"Vertical"
>
</
telerik:RadMenu
>
</
telerik:RadPane
>
</
telerik:RadSplitter
>
</
telerik:RadPane
>
<%-- this is the bar i want not visible at startup--%>
<
telerik:RadSplitBar
ID
=
"RadSplitBar1"
runat
=
"server"
CollapseMode
=
"Forward"
Visible
=
"false"
meta:resourcekey
=
"labCollapseExpand"
></
telerik:RadSplitBar
>
<
telerik:RadPane
ID
=
"RadPane2"
runat
=
"server"
CssClass
=
"ContentPane"
ContentUrl
=
"Welcome.aspx"
>
</
telerik:RadPane
>
</
telerik:RadSplitter
>
</
telerik:RadPane
>
</
telerik:RadSplitter
>
</
telerik:RadAjaxPanel
>
UPDATE: Ive found a partial workaround that seem to fix issue #1 for first page load only (and issue #2 but in FF only). Ive put RadSplitBar1 visible=true and added the following client-side code to collapse the pane and hide the bar at control load. Note that i had to put a timeout delay to make it work. However, issue #1 is still occurring on additional pane collapsing/expanding:
function
Radsplitter6_OnClientLoaded(splitter, args) {
if
(gblCollapsed == 0) {
setTimeout(
function
() {
var
pane = splitter.getPaneById(
'<%= RadPane1.ClientID %>'
);
pane.collapse(1);
gblCollapsed = 1;
var
splitbar = $get(
"<%=RadSplitBar1.ClientID %>"
);
splitbar.style.display =
"none"
;
}, 100);
}
}
Also, I made more tests with other browsers and Issue #2 also occurs on Opera, Safari for Windows.
UPDATE 2: Regarding issue #1, ive found a simpler replicating scenario, in Opera or Firefox, I just have to pop-up my browser search bar (CTRL+F) which resizes my menu pane (vertical scroller appears which reduces menu width), then the hover effect is larger than menu items. Weird thing, believe it or not, I cant reproduce at all this issue in IE8. Also, when issue occurs, clicking on menu items once will make the hover effect thinner then second time will make it the right width.
TIA