Ribbonbar z-order problem

3 posts, 0 answers
  1. Yo
    Yo avatar
    13 posts
    Member since:
    Aug 2013

    Posted 10 Dec 2013 Link to this post

    Hey,
         My SplitButton in Ribbonbar has been "Cover" by the RadPane.
    How to solve this problem? 

    Thanks a lot..
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 10 Dec 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Yo
    Yo avatar
    13 posts
    Member since:
    Aug 2013

    Posted 10 Dec 2013 Link to this post

    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>
Back to Top