Solved

ASP.NET TabContainer Page Positioning

Posted on 2014-01-12
2
976 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:Shane Kahkola
2 Comments
 
LVL 22

Accepted Solution

by:
Mrunal earned 500 total points
ID: 39775852
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:Shane Kahkola
ID: 39778290
That did the trick!  Thank you for the common sense advice.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

I recently went through the process of creating a Calendar Control of events with the basis of using a database to keep track of the dates that are selectable, one requirement was to have the selected date pop-up in a simple lightbox.  At first this…
In .NET 2.0, Microsoft introduced the Web Site.  This was the default way to create a web Project in Visual Studio 2005.  In Visual Studio 2008, the Web Application has been restored as the default web Project in Visual Studio/.NET 3.x The Web Si…
In an interesting question (https://www.experts-exchange.com/questions/29008360/) here at Experts Exchange, a member asked how to split a single image into multiple images. The primary usage for this is to place many photographs on a flatbed scanner…

749 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