PDA

View Full Version : [CLOSED] Accordion with Frame property set to true



RCN
Jun 06, 2012, 8:44 PM
There is a rendering problem If the Accordion´s Frame property is set to true. It renders the first child with a margin as shown in the following image.

Any idea to overcome this issue?



<ext:Panel ID="_pnl" runat="server" Title="Accordion" Width="250" Height="400"
Frame="true" BodyBorder="0" BodyPadding="0" Padding="0" Layout="Accordion">
<LayoutConfig>
<ext:AccordionLayoutConfig DefaultMargins="0" />
</LayoutConfig>
<Items>
<ext:FormPanel ID="FormPanel1" runat="server" BodyPadding="5" Region="Center" Title="Form Panel">
<Items>
<ext:TextField ID="CompanyField" Name="company" runat="server" FieldLabel="Company"
AnchorHorizontal="95%" />
</Items>
</ext:FormPanel>
<ext:Panel ID="Panel2" runat="server" Title="Even More Stuff" />
<ext:Panel ID="Panel3" runat="server" Title="My Stuff" />
</Items>
</ext:Panel>

Daniil
Jun 07, 2012, 5:51 AM
Hi,

Please set up

Cls="my-panel"
for the Panel with AccordionLayout.

Here is the CSS class definition.

<style type="text/css">
.my-panel .x-panel-header {
top: 0px !important;
}
</style>

RCN
Jun 08, 2012, 11:17 AM
is this the final solution to overcome this issue?

RCN
Jun 08, 2012, 11:36 AM
Unfortunately i get the same error when the Cls is set to "my-panel"



<html>
<head id="Head1" runat="server">
<style type="text/css">
.my-panel .x-panel-header
{
top: 0px !important;
}
</style>
</head>
<body>
<div>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Panel ID="_pnl" runat="server" Cls="my-panel" Title="Accordion" Width="250" Height="400" Frame="true" Layout="accordion">
<LayoutConfig>
<ext:AccordionLayoutConfig DefaultMargins="0" />
</LayoutConfig>
<Items>
<ext:FormPanel ID="FormPanel1" runat="server" Region="Center" Title="Form Panel">
<Items>
<ext:TextField ID="CompanyField" Name="company" runat="server" FieldLabel="Company"
AnchorHorizontal="95%" />
</Items>
</ext:FormPanel>
<ext:Panel ID="Panel2" runat="server" Title="Even More Stuff" />
<ext:Panel ID="Panel3" runat="server" Title="My Stuff" />
</Items>
</ext:Panel>
</div>
</body>
</html>

Vladimir
Jun 08, 2012, 12:10 PM
Try to set
BodyStyle="margin-top:-1px;" for panel with layout

RCN
Jun 11, 2012, 1:26 PM

Daniil
Jun 12, 2012, 5:06 PM
Well, I don't think there is a better solution.


Frame="true"
means that a frame will be added for the Panel.

Here is the related ExtJS docs article.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Panel-cfg-frame

So, it's the expected functionality and it is not related to AccordionLayout. This example demonstrates it.

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 v2 Example</title>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:Container runat="server" Width="1000" Layout="HBoxLayout">
<Items>
<ext:Panel
runat="server"
Title="Accordion with Frame = false"
Flex="1"
Height="400"
Frame="false"
Layout="AccordionLayout">
<Items>
<ext:Panel runat="server" Title="Some panel" />
</Items>
</ext:Panel>
<ext:Panel
runat="server"
Title="Accordion with Frame = true"
Flex="1"
Height="400"
Frame="true"
Layout="AccordionLayout">
<Items>
<ext:Panel runat="server" Title="Some panel" />
</Items>
</ext:Panel>
<ext:Panel
runat="server"
Title="With Frame = false and without layout "
Flex="1"
Height="400"
Frame="false">
<Items>
<ext:Panel runat="server" Title="Some panel" />
</Items>
</ext:Panel>
<ext:Panel
runat="server"
Title="With Frame = true and without layout "
Flex="1"
Height="400"
Frame="true">
<Items>
<ext:Panel runat="server" Title="Some panel" />
</Items>
</ext:Panel>
</Items>
</ext:Container>
</body>
</html>


So, if you don't need the top frame, you should override CSS. Repeat myself, setting up

BodyStyle="margin-top:-5px;"
looks to be the simplest solution.

RCN
Nov 06, 2012, 4:01 PM
it may be useful: http://forums.ext.net/showthread.php?21927-Accordion-body-margin-when-frame-property-is-set-to-true