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

Ribbonbar z-order problem

2 Answers 53 Views

RibbonBar

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

2 Answers, 1 is accepted

answered on 10 Dec 2013, 08:49 AM

Hi,

Please try to set the Z-index value of RadRibbonBar as follows.

ASPX:

<telerik:RadRibbonBar ID="RadRibbonBar1" runat="server" CssClass="demo">

<telerik:RibbonBarTab Text="Tab2" Value="2" runat="server">

<telerik:RibbonBarGroup>

<Items>

<telerik:RibbonBarSplitButton Text="splitbutton">

<Buttons>

<telerik:RibbonBarButton Text="1" />

<telerik:RibbonBarToggleButton Text="2" />

<telerik:RibbonBarButton Text="3" />

<telerik:RibbonBarToggleButton Text="4" />

<telerik:RibbonBarButton Text="5" />

<telerik:RibbonBarToggleButton Text="6" />

<telerik:RibbonBarButton Text="7" />

<telerik:RibbonBarToggleButton Text="8" />

</Buttons>

</telerik:RibbonBarSplitButton>

</Items>

</telerik:RibbonBarGroup>

</telerik:RibbonBarTab>

</telerik:RadRibbonBar>

<telerik:RadSplitter ID="RadSplitter1" runat="server">

<telerik:RadPane ID="RadPane1" runat="server">

<telerik:RadMenu ID="RadMenu1" runat="server">

<Items>

<telerik:RadMenuItem Text="Item1" runat="server">

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item2" runat="server">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenu>

</telerik:RadPane>

</telerik:RadSplitter>

CSS:

<style type="text/css">

.demo

{

z-index:7001 !important;

}

</style>

Thanks,
Shinu.

answered on 11 Dec 2013, 02:32 AM

Thank you for your answer, but i have try it but seen not working in my case. 





<%@ Page Language=

"VB" AutoEventWireup="false" CodeBehind="MMenuForm.aspx.vb" Inherits="WANTPrj.MMenuForm" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head runat="server">

<title>FullWindow</title>

<style type="text/css">

html, body, form

{

height: 100%;

margin: 0px;

padding: 0px;

overflow: hidden;

}

ol, ul

{

list-style-image:none;

list-style-position:outside;

list-style-type:none;

}

.clsRibbon

{

z-index:9;

}

.MainPanel

{

z-index:-1;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<script type="text/javascript">

var imgUrl = null;

function onNodeClicking(sender, args) {

if (args.get_node().get_value() != null) {

var pane;

pane = $find("<%= ContentPane.ClientID%>");

pane.set_contentUrl("/App_View/Master/" + args.get_node().get_value());

}

function onButtonClicking(sender, args) {

SendText('\\q2[ s0=[TEST123]]', target='vClientLIST.aspx');

}

function onButtonClicked(sender, args) {

//logEvent("ButtonClicked: " + args.get_button().get_text());

}

function promptCallBackFn(arg) {

// alert(arg);

PageMethods.UpdateClient(Success, Failure);

//radalert("After 7.5 million years, <strong>Deep Thought</strong> answers:<h3 style='color: #ff0000;'>" + arg + "</h3>", 350, 250, "Deep Thought");

}

function Success(result) {

alert(result);

}

function Failure(error) {

alert(error);

}

function pageLoad() {

//attach a handler to radio buttons to update global variable holding image url

var $ = $telerik.$;

$('input:radio').bind('click', function () {

imgUrl = $(this).val();

});

}

</script>

<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>

<telerik:RadPersistenceManager ID="RadPersistenceManager1" runat="server">

<PersistenceSettings>

<telerik:PersistenceSetting ControlID="MasterGrid" />

</PersistenceSettings>

</telerik:RadPersistenceManager>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="MRibbonBar">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="MasterGrid"></telerik:AjaxUpdatedControl>

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadWindowManager ID="RadWindowManager1" runat="server" EnableShadow="true"></telerik:RadWindowManager>

<div id="ParentDivElement" style="height:100%;">

<telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%" Orientation="Horizontal" Skin="Office2007" BorderStyle="None" VisibleDuringInit="false" >

<telerik:RadPane ID="TopPane" runat="server" Height="128" Scrolling="none" BackColor="White" CssClass="clsRibbon" >

<telerik:RadRibbonBar ID="MRibbonBar" runat="server" Skin="Windows7"

OnButtonClick="RadRibbonBar1_ButtonClick" OnMenuItemClick="RadRibbonBar1_MenuItemClick" CssClass="clsRibbon" >

</telerik:RadRibbonBar>

</telerik:RadPane>

<%--<telerik:RadSplitBar ID="RadsplitbarTop" runat="server" CollapseMode="Forward" />--%>

<telerik:RadPane ID="MainPane" runat="server" Scrolling="none" MinWidth="500">

<telerik:RadSplitter ID="NestedSplitter" runat="server" Skin="Office2007" LiveResize="true" VisibleDuringInit="false">

<telerik:RadPane ID="LeftPane" runat="server" Width="200" MinWidth="150" MaxWidth="400" BackColor="White">

<telerik:RadTreeView ID="MMenu" runat="server" Skin="Vista" OnClientNodeClicking="onNodeClicking" ></telerik:RadTreeView>

</telerik:RadPane>

<telerik:RadSplitBar ID="VerticalSplitBar" runat="server" CollapseMode="Forward" />

<telerik:RadPane ID="ContentPane" runat="server" CssClass="MainPanel"> <%--ContentUrl="/App_View/Master/vClientLIST.aspx">--%>

<telerik:RadGrid runat="server" ID="MasterGrid" DataSourceID="SqlDataSource" Skin="Vista" AllowPaging="True" AllowSorting="True" EnableHeaderContextMenu="True" >

<ClientSettings EnableRowHoverStyle="true" AllowColumnsReorder="true" ReorderColumnsOnClient="true" Resizing-AllowResizeToFit="true">

<Selecting AllowRowSelect="True"></Selecting>

<Resizing AllowRowResize="True" EnableRealTimeResize="True" ResizeGridOnColumnResize="false" AllowColumnResize="True" AllowResizeToFit="true"></Resizing>

</ClientSettings>

</telerik:RadGrid>

<asp:SqlDataSource ID="SqlDataSource" ConnectionString="<%$ ConnectionStrings:dWANTechConnectionString %>" SelectCommand="SELECT * FROM [tbFil_Client]" runat="server"></asp:SqlDataSource>

</telerik:RadPane>

</telerik:RadSplitter>

</telerik:RadPane>

</telerik:RadSplitter>

</div>

</form>

</body>

</html>