What's New?

[CLOSED] How to stylize the Panel splitter?

  1. #1
    Aug 24, 2012, 7:12 PM

    [CLOSED] How to stylize the Panel splitter?

    Hi,

    Please suggest how to stylize the look of the mini Panel splitter up/down arrow. I've got such a request from the end users who couldn't find that little arrow easily on the screen. I wonder if its image can be substituted with CSS.

    <ext:Panel ID="Panel1" runat="server" AutoScroll="false"
                        Split="true" Collapsible="false" CollapseMode="Mini" Cls="custom-mini">
       <Items>
       </Items>
</ext:Panel>
    Last edited by Daniil; Aug 29, 2012 at 3:53 AM. Reason: [CLOSED]
  2. #2
    Aug 26, 2012, 9:44 AM
    Hi,

    A splitter bar is not a part of the Panel1 (I mean HTML DOM). You should set up a custom CSS class for a container with BorderLayout.

    Inspecting HTML elements and its CSS rules helps to determine the rules which you should override.

    Example
    <%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!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>Ext.NET Example</title>

    <style type="text/css">
        .custom-mini .x-layout-split .x-layout-mini {
            background: Red;
        }
    </style>
</head>
<body>
    <ext:ResourceManager runat="server" />
    <ext:Panel 
        runat="server" 
        Height="400" 
        Width="400" 
        Layout="BorderLayout"
        Cls="custom-mini">
        <Items>
            <ext:Panel 
                runat="server" 
                Title="West"
                Region="West"
                Width="200"
                Split="true"
                CollapseMode="Mini" />
            <ext:Panel runat="server" Region="Center" Title="Center" />
        </Items>
    </ext:Panel>
</body>
</html>
  3. #3
    Aug 28, 2012, 1:38 AM
    Thanks Daniil!

    For the collapsed state, I think it's

            
.custom-mini .x-layout-collapsed .x-layout-mini
        {
            background: Red;
        }
    Can you help me with the mouse over/mouse out css for the same element?
  4. #4
    Aug 28, 2012, 4:00 AM
    The "x-layout-mini-over" CSS class is added on mouse over.
    .custom-mini .x-layout-split .x-layout-mini.x-layout-mini-over {
    background: Green;
}
  5. #5
    Aug 29, 2012, 12:57 AM
    Thanks Daniil! Please mark this thread as closed.

Similar Threads

  1. [CLOSED] RowLayout with Splitter inside BorderLayout
    By softmachine2011 in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: May 22, 2012, 8:11 AM
  2. [CLOSED] Up Down Splitter
    By legaldiscovery in forum 1.x Legacy Premium Help
    Replies: 12
    Last Post: Nov 17, 2011, 6:50 AM
  3. RowLayout Splitter Issue
    By Manoj Kumar P in forum 1.x Help
    Replies: 1
    Last Post: Feb 21, 2011, 8:06 AM
  4. How to force BorderLayout splitter to have border?
    By dbassett74 in forum 1.x Help
    Replies: 1
    Last Post: May 10, 2009, 2:07 PM
  5. BorderLayout splitter delay when using AutoLoad
    By dbassett74 in forum 1.x Help
    Replies: 3
    Last Post: May 07, 2009, 7:15 PM

Posting Permissions