Hey,
i have trouble with using the new RadRibbonBar control. If i set the width of the ribbonbar to 100%, items in one of the RibbonBarGroups are rendered incorrectly - they look like they have set size to medium although it is set to large in the aspx file. Everything goes back to normal if i resize the browser window. Another thing is the rendering of ribbonbarbuttons, please find the screen attached.
Second thing. If the ribbonbar is placed inside a fixed-height radpane, the RibbonBarMenu is overlayed by radpane.
I'm using Telerik.Web.UI 2011.2.712.40.
Any suggestions?
regards,
Rafal
i have trouble with using the new RadRibbonBar control. If i set the width of the ribbonbar to 100%, items in one of the RibbonBarGroups are rendered incorrectly - they look like they have set size to medium although it is set to large in the aspx file. Everything goes back to normal if i resize the browser window. Another thing is the rendering of ribbonbarbuttons, please find the screen attached.
Second thing. If the ribbonbar is placed inside a fixed-height radpane, the RibbonBarMenu is overlayed by radpane.
I'm using Telerik.Web.UI 2011.2.712.40.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>
<!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
runat
=
"server"
>
<
title
></
title
>
<
telerik:RadStyleSheetManager
id
=
"RadStyleSheetManager1"
runat
=
"server"
/>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
>
<
Scripts
>
<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI"
Name
=
"Telerik.Web.UI.Common.Core.js"
/>
<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI"
Name
=
"Telerik.Web.UI.Common.jQuery.js"
/>
<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI"
Name
=
"Telerik.Web.UI.Common.jQueryInclude.js"
/>
</
Scripts
>
</
telerik:RadScriptManager
>
<
script
type
=
"text/javascript"
>
//Put your JavaScript code here.
</
script
>
<
telerik:RadAjaxManager
ID
=
"RadAjaxManager1"
runat
=
"server"
>
</
telerik:RadAjaxManager
>
<
telerik:RadFormDecorator
runat
=
"server"
ID
=
"RadFormDecorator1"
DecoratedControls
=
"All"
EnableRoundedCorners
=
"true"
ControlsToSkip
=
"Fieldset"
/>
<
telerik:RadSplitter
runat
=
"Server"
ID
=
"RadSplitter1"
Width
=
"100%"
BorderSize
=
"0"
BorderStyle
=
"None"
PanesBorderSize
=
"0"
Height
=
"100%"
Orientation
=
"Horizontal"
VisibleDuringInit
=
"false"
>
<
telerik:RadPane
ID
=
"topPane"
runat
=
"server"
Height
=
"60px"
>
LOGO
<
telerik:RadToolBar
runat
=
"server"
ID
=
"navigationBar"
Skin
=
"Office2007"
>
<
Items
>
<
telerik:RadToolBarButton
Text
=
"Button 1"
/>
<
telerik:RadToolBarButton
Text
=
"Button 2"
/>
<
telerik:RadToolBarButton
Text
=
"Button 3"
/>
<
telerik:RadToolBarButton
Text
=
"Button 4"
/>
<
telerik:RadToolBarButton
Text
=
"Button 5"
/>
<
telerik:RadToolBarButton
Text
=
"Button 6"
/>
<
telerik:RadToolBarButton
Text
=
"Button 7"
/>
<
telerik:RadToolBarButton
Text
=
"Button 8"
/>
</
Items
>
</
telerik:RadToolBar
>
</
telerik:RadPane
>
<
telerik:RadPane
runat
=
"server"
ID
=
"contentPane"
Scrolling
=
"None"
>
<
telerik:RadSplitter
runat
=
"server"
ID
=
"splitter2"
BorderStyle
=
"None"
PanesBorderSize
=
"0"
>
<
telerik:RadPane
runat
=
"server"
ID
=
"leftPane"
Width
=
"220px"
MinWidth
=
"220"
MaxWidth
=
"220"
Scrolling
=
"None"
>
<
telerik:RadSplitter
runat
=
"server"
ID
=
"radSplitter3"
BorderStyle
=
"None"
PanesBorderSize
=
"0"
BorderWidth
=
"0px"
Height
=
"100%"
Orientation
=
"Horizontal"
>
<
telerik:RadPane
runat
=
"server"
ID
=
"topLeftPane"
BorderStyle
=
"None"
BorderWidth
=
"0px"
PanesBorderSize
=
"0"
>
top left
</
telerik:RadPane
>
</
telerik:RadSplitter
>
</
telerik:RadPane
>
<
telerik:RadPane
runat
=
"Server"
ID
=
"rightPane"
Scrolling
=
"None"
Height
=
"100%"
BorderStyle
=
"None"
BorderWidth
=
"0px"
>
<
telerik:RadSplitter
runat
=
"server"
ID
=
"RadDesk1"
Width
=
"100%"
BorderSize
=
"0"
BorderStyle
=
"None"
PanesBorderSize
=
"0"
Height
=
"100%"
Orientation
=
"Horizontal"
>
<
telerik:RadPane
runat
=
"server"
ID
=
"RadPane1"
Height
=
"157px"
EnableViewState
=
"false"
Scrollable
=
"false"
Scrolling
=
"None"
>
<
telerik:RadRibbonBar
runat
=
"server"
ID
=
"ribbonbar1"
Width
=
"100%"
Skin
=
"Windows7"
>
<
telerik:RibbonBarTab
Text
=
"Bar 1"
Selected
=
"true"
>
<
telerik:RibbonBarGroup
Text
=
"New"
EnableLauncher
=
"false"
>
<
Items
>
<
telerik:RibbonBarButton
Size
=
"Large"
Text
=
"Item 1"
ImageUrl
=
"~/img/new1.png"
/>
<
telerik:RibbonBarMenu
Size
=
"Large"
Text
=
"Item 2"
ImageUrl
=
"~/img/new1.png"
>
<
Items
>
<
telerik:RibbonBarMenuItem
Text
=
"menu item 1"
/>
<
telerik:RibbonBarMenuItem
Text
=
"menu item 2"
/>
<
telerik:RibbonBarMenuItem
Text
=
"menu item 3"
/>
<
telerik:RibbonBarMenuItem
Text
=
"menu item 4"
/>
</
Items
>
</
telerik:RibbonBarMenu
>
</
Items
>
</
telerik:RibbonBarGroup
>
<
telerik:RibbonBarGroup
Text
=
"Edit"
EnableLauncher
=
"false"
>
<
Items
>
<
telerik:RibbonBarButton
Size
=
"Large"
Text
=
"Item 1"
ImageUrl
=
"~/img/new1.png"
/>
<
telerik:RibbonBarButton
Size
=
"Large"
Text
=
"Item 2"
ImageUrl
=
"~/img/new1.png"
/>
</
Items
>
</
telerik:RibbonBarGroup
>
<
telerik:RibbonBarGroup
Text
=
"Export"
EnableLauncher
=
"true"
>
<
Items
>
<
telerik:RibbonBarButton
Size
=
"Large"
Text
=
"Item 1"
ImageUrl
=
"~/img/new1.png"
/>
<
telerik:RibbonBarButton
Size
=
"Large"
Text
=
"Item 2"
ImageUrl
=
"~/img/new1.png"
/>
<
telerik:RibbonBarButton
Size
=
"Large"
Text
=
"Item 3"
ImageUrl
=
"~/img/new1.png"
/>
<
telerik:RibbonBarButton
Size
=
"Large"
Text
=
"Item 4"
ImageUrl
=
"~/img/new1.png"
/>
</
Items
>
</
telerik:RibbonBarGroup
>
<
telerik:RibbonBarGroup
Text
=
"Delete"
EnableLauncher
=
"false"
>
<
Items
>
<
telerik:RibbonBarButton
Size
=
"Large"
Text
=
"Delete"
ImageUrl
=
"~/img/new1.png"
/>
</
Items
>
</
telerik:RibbonBarGroup
>
</
telerik:RibbonBarTab
>
</
telerik:RadRibbonBar
>
</
telerik:RadPane
>
<
telerik:RadPane
runat
=
"server"
ID
=
"RadPane2"
Scrolling
=
"None"
>
content
<
img
src
=
"img/new1.png"
/>
</
telerik:RadPane
>
</
telerik:RadSplitter
>
</
telerik:RadPane
>
</
telerik:RadSplitter
>
</
telerik:RadPane
>
</
telerik:RadSplitter
>
</
form
>
</
body
>
</
html
>
Any suggestions?
regards,
Rafal