[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 194
  • Last Modified:

How do I center my table in my panel?

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
Michael Sterling
Asked:
Michael Sterling
  • 6
  • 5
1 Solution
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
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
 
Kyle AbrahamsSenior .Net DeveloperCommented:
create a parent table with 1 cell that's width is 100%, set the text-align to center.
0
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
@Kyle Abrahams: Do this within my panel? Or wrap the panel (and the main table within it) within this outer table?
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
Kyle AbrahamsSenior .Net DeveloperCommented:
<panel>
<table style="width:100%; text-align:center">
  <tr>
   <td>  
      <table />  <!-- your existing table here -->
   </td>
</tr>
</table>
</panel>
0
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
@Kyle Abraham: Thank you, will do.
0
 
Kyle AbrahamsSenior .Net DeveloperCommented:
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
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
So what's odd, is that this works in IE8, but not in fire fox, any suggestions?
0
 
Kyle AbrahamsSenior .Net DeveloperCommented:
what version of firefox?  This it's working in version 31.
0
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
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
 
Kyle AbrahamsSenior .Net DeveloperCommented:
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
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
Thank you.
0

Featured Post

Take Control of Web Hosting For Your Clients

As a web developer or IT admin, successfully managing multiple client accounts can be challenging. In this webinar we will look at the tools provided by Media Temple and Plesk to make managing your clients’ hosting easier.

  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now