Solved

How do I center my table in my panel?

Posted on 2014-09-24
11
178 Views
Last Modified: 2014-09-25
Hello, I'm new to working in the designer in VS 2010 so I'd written all of my code in the source window but am now re-doing the code using the designer. I have a few panels on my page that I hide and or show based on certain settings etc., so I'd like to keep the panels. How do I center my table within the panel?

            <asp:Panel ID="pnlManager" runat="server">
                <div class="updateAlert">
                    <asp:Panel runat="server" ID="pnlUpdateConfirmation" Visible="false" CssClass="UpdatedMessage Alert SavedSmall">
                        <h3>
                            <asp:Label runat="server" ID="lblConfirmationMsg"></asp:Label></h3>
                    </asp:Panel>
                </div>
                <table cellpadding="2" cellspacing="3">
                    <tr>
                        <td colspan="4" style="font-weight: bold; text-decoration: underline">
                            <asp:HyperLink ID="hlRetunToList" runat="server" NavigateUrl="UARSubmissionList.aspx">Return To UAR List</asp:HyperLink>
                            <asp:LinkButton ID="lkbtnLogOff" runat="server" CssClass="logOffLink" OnClick="lkbtnLogOff_Click"
                                Text="Log Off" Width="115px" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="4" style="font-weight: bold; text-decoration: underline">
                            All information must be filled out completely or request will be denied!
                        </td>
                    </tr>
                    <tr>
                        <td colspan="4" style="font-weight: bold; text-decoration: underline">
                            <asp:Label ID="lblError" runat="server" CssClass="alertMessage" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="4" style="font-weight: bold; text-decoration: underline">
                            <asp:Label ID="lblMsg" runat="server" Font-Bold="true" ForeColor="#CC0000" />
                        </td>
                    </tr>
                    <tr>
                        <td class="style2" style="text-align: right; padding: 8px 0 0 1px;">
                            &nbsp;
                        </td>
                        <td class="style16">
                            &nbsp;
                        </td>
                        <td class="style17" style="text-align: right;">
                            &nbsp;
                        </td>
                        <td>
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td class="style2" style="text-align: right; padding: 8px 0 0 1px;">
                            Request Type:
                        </td>
                        <td class="style16" style="text-align: left">
                            <asp:RadioButtonList ID="ddlRequestType1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlRequestType1_SelectedIndexChanged"
                                RepeatDirection="Horizontal">
                                <asp:ListItem Selected="True" Text="ADD" Value="0" />
                                <asp:ListItem Text="CHANGE" Value="1" />
                                <asp:ListItem Text="DEACTIVATE" Value="2" />
                            </asp:RadioButtonList>
                        </td>
                        <td class="style17" style="text-align: right;">
                            Date of Request:
                        </td>
                        <td style="text-align: left">
                            <asp:TextBox ID="txtDtOfReq" runat="server" MaxLength="10" Width="100px" />
                        </td>
                    </tr>
                    <tr>
                        <td class="style3">
                            <asp:Label ID="lblEmpName0" runat="server" Text="Employee Name:" />
                        </td>
                        <td class="style16" style="text-align: left">
                            <asp:TextBox ID="txtEmpName" runat="server" MaxLength="50" Width="200px" />
                        </td>
                        <td class="style17" style="text-align: right;">
                            <asp:Label ID="lblHrDtTermDt" runat="server" Text="Hire Date:" />
                        </td>
                        <td style="text-align: left">
                            <asp:TextBox ID="txtHrDtTrmDt" runat="server" MaxLength="10" Width="100px" />
                        </td>
                    </tr>
                    <tr>
                        <td class="style3">
                            Immediate Supervisor:
                        </td>
                        <td class="style16" style="text-align: left">
                            <asp:TextBox ID="txtImmSupName" runat="server" CssClass="disabledBold" MaxLength="50"
                                Width="200px" />
                        </td>
                        <td style="text-align: right" class="style17">
                            &nbsp;
                        </td>
                        <td>
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td class="style2" style="text-align: right; padding: 8px 0 0 0;">
                            Employee Type:
                        </td>
                        <td class="style16" style="text-align: left">
                            <asp:RadioButtonList ID="ddlEmpORCons" runat="server" RepeatDirection="Horizontal">
                                <asp:ListItem Text="Employee" Value="0" />
                                <asp:ListItem Text="Consultant" Value="1" />
                                <asp:ListItem Text="Temp" Value="2" />
                            </asp:RadioButtonList>
                        </td>
                        <td style="text-align: right" class="style17">
                            &nbsp;
                        </td>
                        <td>
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td class="style3">
                            Branch:
                        </td>
                        <td class="style16" style="text-align: left">
                            <asp:TextBox ID="txtBranch" runat="server" CssClass="disabledBold" MaxLength="4"
                                Width="65px" />
                        </td>
                        <td style="text-align: right" class="style17">
                            &nbsp;
                        </td>
                        <td>
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td class="style3">
                            Department:
                        </td>
                        <td class="style16" style="text-align: left">
                            <asp:DropDownList ID="ddlDepartment" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlDepartment_SelectedIndexChanged"
                                Width="175px">
                            </asp:DropDownList>
                        </td>
                        <td style="text-align: right" class="style17">
                            &nbsp;
                        </td>
                        <td>
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td class="style3">
                            Posistion or Job Title:
                        </td>
                        <td class="style16" style="text-align: left">
                            <asp:DropDownList ID="ddlPosJobTitle" runat="server" AutoPostBack="true" Width="200px">
                            </asp:DropDownList>
                        </td>
                        <td style="text-align: right" class="style17">
                            Model After:
                        </td>
                        <td>
                            <asp:TextBox ID="txtModelAfterTextBox" runat="server" MaxLength="30" Width="200px" />
                        </td>
                    </tr>
                    <tr>
                        <td class="style3" style="text-align: right">
                            <asp:Label ID="lblNeedEmail" runat="server" Text="Need new email: " />
                        </td>
                        <td class="style16">
                            <asp:RadioButtonList ID="ddlNeedEmail" runat="server" RepeatDirection="Horizontal">
                                <asp:ListItem Selected="True" Text="Yes" Value="0" />
                                <asp:ListItem Text="No" Value="1" />
                            </asp:RadioButtonList>
                        </td>
                        <td class="style17">
                            &nbsp;
                        </td>
                        <td>
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td class="style3" style="text-align: right">
                            <asp:Label ID="lblCompName" runat="server" Text="Computer Name: " />
                        </td>
                        <td class="style16" style="text-align: left">
                            <asp:TextBox ID="txtCompName" runat="server" MaxLength="20" Width="100px" />
                            <a id="trigger" href="#">Find Computer Name</a>
                        </td>
                        <td class="style17" style="text-align: right">
                            <asp:Label ID="lblPrevExt" runat="server" Text="Previous Ext. (phone user):" />
                        </td>
                        <td style="text-align: left">
                            <asp:TextBox ID="txtPrevExt" runat="server" MaxLength="4" Width="100px" />
                        </td>
                    </tr>
                    <tr>
                        <td class="style3" colspan="4" style="text-align: left; vertical-align: bottom;">
                            <asp:Label ID="lblComment" runat="server" Text="Comments:  " />
                            <asp:TextBox ID="txtComment" runat="server" MaxLength="200" Rows="3" TextMode="MultiLine"
                                Width="400px" />
                        </td>
                    </tr>
                    <tr>
                        <td class="style3" style="text-align: right; vertical-align: bottom;">
                            <asp:Button ID="Submit" runat="server" OnClick="Submit_Click" Text="Submit" Width="65px" />
                        </td>
                        <td class="style16">
                            &nbsp;
                        </td>
                        <td class="style17">
                            &nbsp;
                        </td>
                        <td>
                            &nbsp;
                        </td>
                    </tr>
                </table>
                <br />
                <br />
            </asp:Panel>

Open in new window

0
Comment
Question by:mikesExpertExchange
  • 6
  • 5
11 Comments
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 40341852
If i remove the panel the table defaults to "left justified". Ultimately I want the table(s), centered in the panel, again, I'd like to keep the panels in place for the existing code that shows / hides them when its appropriate.
0
 
LVL 40

Expert Comment

by:Kyle Abrahams
ID: 40341858
create a parent table with 1 cell that's width is 100%, set the text-align to center.
0
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 40341897
@Kyle Abrahams: Do this within my panel? Or wrap the panel (and the main table within it) within this outer table?
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 40

Expert Comment

by:Kyle Abrahams
ID: 40341916
<panel>
<table style="width:100%; text-align:center">
  <tr>
   <td>  
      <table />  <!-- your existing table here -->
   </td>
</tr>
</table>
</panel>
0
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 40341927
@Kyle Abraham: Thank you, will do.
0
 
LVL 40

Accepted Solution

by:
Kyle Abrahams earned 500 total points
ID: 40341930
Note that in order for it to work each parent must be assigned 100%

This works in JSFiddle

<table style="width:100%; text-align:center"> 
    <tr>
        <td>
            <table style="width:100%">
                <tr>
                    <td>
                     some text
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Open in new window

0
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 40341960
So what's odd, is that this works in IE8, but not in fire fox, any suggestions?
0
 
LVL 40

Expert Comment

by:Kyle Abrahams
ID: 40341968
what version of firefox?  This it's working in version 31.
0
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 40342155
Ok. Well miraculously, it is now working, go figure. Last question, in the designer, for some reason, if i put the Panel control in as we have discussed, it is hiding all of the controls of the table, that are wrapped in the panel. Any idea why that would happen?
0
 
LVL 40

Expert Comment

by:Kyle Abrahams
ID: 40342164
Is it set to visible = false or display = none by default?

Your page might have been cached which is why you would be seeing the incorrect results.  Glad you got it working.
0
 
LVL 1

Author Closing Comment

by:mikesExpertExchange
ID: 40344587
Thank you.
0

Featured Post

Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
edit .asp files 5 31
C#.net split string and then check appropriate checkboxlist 4 27
SSIS Start 2 21
Can Angular be used with classic asp.net? 3 19
Performance in games development is paramount: every microsecond counts to be able to do everything in less than 33ms (aiming at 16ms). C# foreach statement is one of the worst performance killers, and here I explain why.
This article aims to explain the working of CircularLogArchiver. This tool was designed to solve the buildup of log file in cases where systems do not support circular logging or where circular logging is not enabled
Microsoft Active Directory, the widely used IT infrastructure, is known for its high risk of credential theft. The best way to test your Active Directory’s vulnerabilities to pass-the-ticket, pass-the-hash, privilege escalation, and malware attacks …
Finds all prime numbers in a range requested and places them in a public primes() array. I've demostrated a template size of 30 (2 * 3 * 5) but larger templates can be built such 210  (2 * 3 * 5 * 7) or 2310  (2 * 3 * 5 * 7 * 11). The larger templa…

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question