Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Ribbonbar z-order problem

2 Answers 27 Views
RibbonBar
This is a migrated thread and some comments may be shown as answers.
Yo
Top achievements
Rank 1
Yo asked on 10 Dec 2013, 06:52 AM
ribbonbar-Problem.jpg
Hey,
     My SplitButton in Ribbonbar has been "Cover" by the RadPane.
How to solve this problem? 

Thanks a lot..

2 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
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.
0
Yo
Top achievements
Rank 1
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>
Tags
RibbonBar
Asked by
Yo
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Yo
Top achievements
Rank 1
Share this question
or