PDA

View Full Version : TabPanel <body> CSS being ignored in



red4life
13 Oct 2009, 8:10 AM
I have an HTML table within a TabPanel <body> with a padding-below style on the table rows. For some reason, the CSS is not being applied when the table is housed in a tab <body>. All of my other CSS is applied fine but not the row padding. Can anyone please shed some light on this. Many thanks.

Mthor
13 Oct 2009, 8:24 AM
.bottompadding {
padding-bottom:20px;
}

or a inline style style:"padding-bottom:20px;"


post some code for more help, it is easier for people to help with code. :)

red4life
13 Oct 2009, 9:01 AM
I've noiticed that even if the table is outside the TabPanel, the padding-bottom will not be applied. If I put the table on a separate page, it's fine.

Thanks.

<ext:TabPanel ID="TabPanel1" runat="server" ActiveTabIndex="0" Height="300" Width="600px" Plain="True">
<tabs>
<ext:Tab runat="server" ID = "tab1" Title="Tab 1">
<body>
<table cellpadding="0" cellspacing="0" border="0">
<tr style="padding-bottom:20px;" >
<td><asp:Label ID="Label1" runat="server" Text="Label1"></asp:Label></td>
<td><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
</tr>
<tr style="padding-bottom:20px;" >
<td><asp:Label ID="Label2" runat="server" Text="Label2"></asp:Label></td>
<td><asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></td>
</tr>
<tr style="padding-bottom:20px;" >
<td><asp:Label ID="Label3" runat="server" Text="Label3"></asp:Label></td>
<td><asp:TextBox ID="TextBox3" runat="server"></asp:TextBox></td>
</tr>
</table>
</body>
</ext:Tab>
</tabs>
</ext:TabPanel>

Mthor
13 Oct 2009, 9:53 AM
try this and see if that works. I put the padding in the bottom <td>


<ext:TabPanel ID="TabPanel1" runat="server" ActiveTabIndex="0" Height="300"
Width="600px" Plain="True">
<tabs>
<ext:Tab runat="server" ID="tab1" Title="Tab 1">

<body>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="Label1">
</asp:Label>
</td>
<td style="padding-bottom:20px;">
<asp:TextBox ID="TextBox1" runat="server">
</asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label2" runat="server" Text="Label2">
</asp:Label>
</td>
<td style="padding-bottom:20px;">
<asp:TextBox ID="TextBox2" runat="server">
</asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label3" runat="server" Text="Label3">
</asp:Label>
</td>
<td style="padding-bottom:20px;">
<asp:TextBox ID="TextBox3" runat="server">
</asp:TextBox>
</td>
</tr>
</table>
</body>
</ext:Tab>
</tabs>
</ext:TabPanel>

red4life
13 Oct 2009, 10:05 AM
Thanks for the reply. It's a workaround but I'd like to fix the real issue - why the row CSS is being ignored/overridden. I can go with the workaround but I know it's gonna create other issues for me - I have a load of these tables with all kinds of controls in. I'll need to put the padding on eveything which is a big pain.

How do you look at/edit the theme CSS being used by the TabControl? I suspect there's something in there that's messing with the table.

red4life
13 Oct 2009, 11:09 AM
Solved it.

http://www.extjs.com/learn/Manual:Ext_CSS_Overview