Solved

ASP.NET TabContainer Page Positioning

Posted on 2014-01-12
2
898 Views
Last Modified: 2014-01-13
I know that I can center a <div></div> horizontally on my page by using
style="margin: auto; display: block"

Open in new window

.  However, I have tried this with the ASP.NET TabContainer and I'm coming up empty.
Here is the ASP code:
<asp:TabPanel ID="basic" runat="server" Headertext="Basic Information" CssClass="Tab">
	<ContentTemplate>
		<table width="400" border="0" cellpadding="1" cellspacing="0" style="margin: 0 auto">
			<tr>
				<td colspan="3" style="width: 400px; text-align: left">
					<asp:Label ID="typeLbl" runat="server" Text="Client Type: " /><br />
					<asp:SqlDataSource ID="clientTypes" runat="server" ConnectionString="<%$ ConnectionStrings:CS %>" SelectCommand="SELECT description FROM types WHERE category='Client' AND active='true' ORDER BY description" />
					<asp:DropDownList ID="type" runat="server" Width="200" DataSourceID="clientTypes" DataTextField="description" DataValueField="description" />&nbsp;&nbsp;&nbsp;
					<asp:CheckBox ID="clientActive" runat="server" Checked="true" Text="Active" />
				</td>
			</tr>
			<tr><td colspan="3">&nbsp;</td></tr>
			<tr>
				<td style="width: 150px">
					<asp:Label ID="firstNameLbl" runat="server" Text="First Name: " />
					<asp:TextBox ID="firstName" runat="server" Width="148px" />
				</td>
				<td style="width: 100px; text-align: center">
					<asp:Label ID="miLbl" runat="server" Text="M.I." Width="75" />
					<asp:TextBox ID="mi" runat="server" Width="75" />
				</td>
				<td style="width: 150px">
					<asp:Label ID="lastNameLbl" runat="server" Text="Last Name: " />
					<asp:TextBox ID="lastName" runat="server" Width="148" />
				</td>
			</tr>
			<tr><td colspan="3">&nbsp;</td></tr>
			<tr>
				<td>
					<asp:Label ID="suffixLbl" runat="server" Text="Suffix:" /><br />
					<asp:TextBox ID="suffix" runat="server" Width="50" />
				</td>
				<td colspan="2" style="text-align: right; vertical-align: bottom">
					<asp:Button ID="cancelClient" runat="server" Text="Cancel" Width="90" onclick="cancelClient_Click" />&nbsp;&nbsp;
					<asp:Button ID="addClient" runat="server" Text="Save Client" Width="100" onclick="addClient_Click" />&nbsp;&nbsp;
					</td>
			</tr>
		</table>
		<asp:Label ID="clientResult" runat="server" ForeColor="Green" Font-Bold="true" Visible="false" /><br />&nbsp;<br />
	</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="address" runat="server" HeaderText="Second Tab" CssClass="Tab">
	<ContentTemplate>&nbsp;</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>

Open in new window


The CSS looks like this (with the help of some code I borrowed):
.Tab .ajax__tab_container .ajax__tab_default
{
    margin: auto;
    display: block;
}

Open in new window

I did not include the other CSS attributes in that stylesheet because they only affect the tabs and tab body.
A screenshot of the result has been uploaded -- with the "Inspect Element" data showingScreenshot of my problemNote the added
style="width: 600px; visibility: visible;">

Open in new window

I did not enter that.  If I don't enter a width, it assumes 100% and doesn't display anything in the "style" entry except visibility: none.
I even tried
.Tab .ajax__tab_container .ajax__tab_default
{
	margin: auto !important;
	display: block !important;
}

Open in new window

and that didn't work.
If I try to inline the style entry, it overrides the other tab styles in my style sheet so that I have to specify EVERYTHING in the inline style.
I really need to center this horizontally on the page for aesthetic purposes.  My customer isn't going to like this thing all the way to the left of the page.
Does anyone have any thoughts?  Shouldn't this work?  Is there a way to override the AJAX style?
0
Comment
Question by:ccbbc_cs
2 Comments
 
LVL 22

Accepted Solution

by:
Mrunal earned 500 total points
Comment Utility
Hi,
try by adding complete code inside of <center> ... </center> tag and assign width. And you are done.
0
 
LVL 3

Author Closing Comment

by:ccbbc_cs
Comment Utility
That did the trick!  Thank you for the common sense advice.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Today is the age of broadband.  More and more people are going this route determined to experience the web and it’s multitude of services as quickly and painlessly as possible. Coupled with the move to broadband, people are experiencing the web via …
Introduction This article shows how to use the open source plupload control to upload multiple images. The images are resized on the client side before uploading and the upload is done in chunks. Background I had to provide a way for user…
Internet Business Fax to Email Made Easy - With eFax Corporate (http://www.enterprise.efax.com), you'll receive a dedicated online fax number, which is used the same way as a typical analog fax number. You'll receive secure faxes in your email, fr…
Excel styles will make formatting consistent and let you apply and change formatting faster. In this tutorial, you'll learn how to use Excel's built-in styles, how to modify styles, and how to create your own. You'll also learn how to use your custo…

763 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

Need Help in Real-Time?

Connect with top rated Experts

6 Experts available now in Live!

Get 1:1 Help Now