Results 1 to 6 of 6

Thread: TabPanel <body> CSS being ignored in

  1. #1

    Question TabPanel <body> CSS being ignored in

    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.

  2. #2
    Sencha Premium Member
    Join Date
    Nov 2007
    Location
    Moore, Oklahoma
    Posts
    502

    Default

    Code:
    .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.

  3. #3

    Default

    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>

  4. #4
    Sencha Premium Member
    Join Date
    Nov 2007
    Location
    Moore, Oklahoma
    Posts
    502

    Default

    try this and see if that works. I put the padding in the bottom <td>

    Code:
    <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>

  5. #5

    Default

    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.

  6. #6

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •