[OPEN] [#149] Remove border from panel header and body

  1. #1

    [OPEN] [#149] Remove border from panel header and body

    I want to remove all borders from a panel with header. I turned off border and bodyBorder but body still have a top border.

    <html>
    <head id="Head1" runat="server">
        <style type="text/css">
            body
            {
                padding: 10px;
            }
            
            .x-panel-header 
            {
                background-color:White !important;
                background-image:none !important;
            }
        </style>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" Theme="Gray"
            DisableViewState="true" />
        <ext:Panel runat="server" Title="Title" Width="500" Height="200" Border="false" BodyBorder="0"
            Collapsible="true" BodyPadding="5">
            <Items>
                <ext:Button runat="server" Text="Content">
                </ext:Button>
            </Items>
        </ext:Panel>
        </form>
    </body>
    </html>
    Last edited by Daniil; Feb 12, 2013 at 6:33 AM. Reason: [OPEN] [#149]
  2. #2
    Hi @jchau,

    BodyBorder setting only affects with Frame="true" setting.
    http://docs.sencha.com/ext-js/4-1/#!...cfg-bodyBorder

    Border="0" appears to don't hide a body's top border.

    I can suggest the following solution.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <style type="text/css">
            .my-panel .x-panel-header {
                background-color: white;
                background-image: none;
                border: none;
            }
    
            .my-panel .x-panel-body {
                border: none;
            }
        </style>
    </head>
    <body>
        <ext:ResourceManager runat="server" Theme="Gray" />
    
        <ext:Panel 
            runat="server"
            Title="Title" 
            Width="500" 
            Height="200" 
            Collapsible="true" 
            BodyPadding="5"
            Html="Content"
            Cls="my-panel" />
    </body>
    </html>
    Last edited by Daniil; Feb 09, 2013 at 6:33 AM.
  3. #3
    Quote Originally Posted by Daniil View Post
    Border="0" appears to don't hide a body's top border.
    It looks buggy. I asked Sencha.
    http://www.sencha.com/forum/showthread.php?256054
  4. #4
    Sencha opened a bug.

    We created an Issue to monitor.
    https://github.com/extnet/Ext.NET/issues/149

Similar Threads

  1. Replies: 3
    Last Post: Jul 01, 2013, 7:24 AM
  2. Replies: 2
    Last Post: Jan 24, 2013, 6:22 AM
  3. [CLOSED] Panel header and border visibility
    By kenanhancer in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jan 20, 2011, 12:54 PM
  4. [CLOSED] How to remove the TabPanel header bottom border?
    By flormariafr in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 12, 2010, 4:09 PM
  5. Window without border, header, title
    By reinaldo.designerdigital in forum 1.x Help
    Replies: 2
    Last Post: Feb 05, 2009, 10:00 AM

Posting Permissions