?
Solved

ASP.NET TabContainer Page Positioning

Posted on 2014-01-12
2
Medium Priority
?
1,053 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 22

Accepted Solution

by:
Mrunal earned 2000 total points
ID: 39775852
Hi,
try by adding complete code inside of <center> ... </center> tag and assign width. And you are done.
0
 
LVL 4

Author Closing Comment

by:Shane Kahkola
ID: 39778290
That did the trick!  Thank you for the common sense advice.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

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…
Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
NetCrunch network monitor is a highly extensive platform for network monitoring and alert generation. In this video you'll see a live demo of NetCrunch with most notable features explained in a walk-through manner. You'll also get to know the philos…
Monitoring a network: how to monitor network services and why? Michael Kulchisky, MCSE, MCSA, MCP, VTSP, VSP, CCSP outlines the philosophy behind service monitoring and why a handshake validation is critical in network monitoring. Software utilized …
Suggested Courses

771 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