Solved

Centering a dynamically created div within a div.

Posted on 2010-08-31
7
420 Views
Last Modified: 2012-05-10
I have an ASP.NET application developed in Visual Studio 2008 with VB.net.
In this app I have a master page with a link on it that when clicked calls a JavaScript function named YourAre().  This function calls a web service that returns a string of HTML.  The YourAre function then calls another JavaScript function SetHelpDiallog which uses innerHTML to place the returned HTML into an existing div element on the master page.   The insert HTML includes a div element so there is now a div within a div.   The SetHelpDialog now  makes a Jquery dialog out of the outer div. The text in the inner div should be aligned to the left while the inner div itself should be centered within the outer div.  All works well except the inner div is not centered.  If anyone can tell me how do do this I'd greatly appreciate it.  In the code below line 194 has the code for the inner div including the style with which I'm trying to get it centered.

This is an internal app and we use IE7 and 8.
<%@ Master Language="VB" CodeFile="ClientTrack.master.vb" Inherits="ClientTrack" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Site Master Page</title>
    <asp:ContentPlaceHolder id="head" runat="server"></asp:ContentPlaceHolder>
   
    <link href="~/Styles/Master.css" rel="stylesheet" type="text/css" />
    <link href="~/Styles/Dialog.css" rel="stylesheet" type="text/css" />

    <script src="/WebApps/ClientTrack3.5/js/jquery/jquery-1.4.2.js" type="text/javascript"></script>    
    <script src="/WebApps/ClientTrack3.5/js/jquery/jquery-1.4.2-vsdoc.js" type="text/javascript"></script>
    <script src="/WebApps/ClientTrack3.5/js/jquery/jQueryUI.js" type="text/javascript"></script>
    <script src="/WebApps/ClientTrack3.5/js/Master.js" type="text/javascript"></script>  
    <script type="text/javascript">
        window.onbeforeunload = confirmExit;
    </script>
    
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Services>
                <asp:ServiceReference Path="~/WebServices/HelpService.asmx" />
            </Services>
        </asp:ScriptManager>
        <div id="divPageWrapper">
            <div id="divHeaderOne">
                <asp:Image runat="server" ID="HeaderImage" CssClass="HeaderOneImage" ImageUrl="~/Images/MasterHeader.gif"
                    AlternateText="Logo" />
            </div>
            <div id="divMenu">
                <asp:Menu CssClass="MainMenu" ID="MasterMenu" runat="server" DataSourceID="SiteMapDataSource1"
                    Orientation="Horizontal" StaticEnableDefaultPopOutImage="False">
                    <StaticSelectedStyle CssClass="StaticSelectedStyle" />
                    <StaticMenuItemStyle CssClass="StaticMenuItemStyle" ItemSpacing="0px" />
                    <StaticHoverStyle CssClass="StaticHoverStyle" />
                    <DynamicMenuStyle CssClass="DynamicMenuStyle" />
                    <DynamicMenuItemStyle CssClass="DynamicMenuItemStyle" />
                    <DynamicHoverStyle CssClass="DynamicHoverStyle" />
                </asp:Menu>
            </div>
            <div id="divHeaderTwo">
                <asp:Label ID="lblFormTitle" runat="server" Text="FormTitle"></asp:Label>
            </div>
            <div id="divHeaderThree">
                <asp:UpdatePanel ID="UpdatePanelDDL" runat="server">
                    <ContentTemplate>
                        Records For
                        <asp:DropDownList ID="ddlRecordsFor" runat="server" Width="150px" CssClass="RecordsFor" AutoPostBack="True">
                            <asp:ListItem>1</asp:ListItem>
                            <asp:ListItem>2</asp:ListItem>
                            <asp:ListItem>3</asp:ListItem>
                        </asp:DropDownList>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
            <div id="divSideBar">
                <asp:LinkButton ID="LogOff" runat="server">Log Off</asp:LinkButton>
                <a id="SpellCheck" onclick="checkspell()">Spell Check</a><br />
                <a id="YouAre" onclick="YouAre()">You Are</a>
                <asp:HyperLink ID="YouCan" runat="server">You Can</asp:HyperLink>
                <asp:HyperLink ID="WhoCan" runat="server">Who Can</asp:HyperLink>
                <asp:HyperLink ID="HowCan" runat="server">How Can</asp:HyperLink>
                <asp:UpdateProgress ID="UpdateProgressButton" runat="server">
                    <ProgressTemplate>
                        <div class="Progress">
                        </div>
                        <br />
                        <div class="PleaseWait"> Please Wait...</div>
                    </ProgressTemplate>
                </asp:UpdateProgress>
            </div>
            <div id="divMainContent">
                <asp:ContentPlaceHolder ID="cp1" runat="server">
                    Under Construction
                </asp:ContentPlaceHolder>
            </div>
            <div id="divFooter">
                <asp:UpdatePanel ID="UpdatePanelButton" runat="server">
                    <ContentTemplate>
                        <asp:Button ID="btnDivideByZero" runat="server" Text="Divide by Zero" Width="125px" />
                        <asp:Button ID="btnPageNotFound" runat="server" Text="Page Not Found" Width="133px" />
                        <asp:Button ID="btnDatabaseError" runat="server" Text="Data base Error" Width="125px" />
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
        </div>
        <div id="divHelp" visible="false"></div>
        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />
    </form>
</body>
</html>

var Message = ""
var MessageTitle
function YouAre() 
{
    if (MessageTitle == "You Are") 
    {
        $('div#divHelp').dialog("open")
    }
    else 
    {
            $get("ctl00_UpdateProgressButton").style.display = "block";
            $get("ctl00_UpdateProgressButton").style.visibility = "visible";
            $('div#divHelp').dialog("close")
            HelpService.YouAre(YouAreCallBack);
            var t = setTimeout("SetHelpDialog(100,200)", 2000);
    }
}

function YouAreCallBack(result) 
{
    if (result.substring(0,5) == "Error")
    {
        divHelp.title = result.substring(0, 5);
        MessageTitle = "Error";
    }
    else
    {
        divHelp.title = "You Are";
        MessageTitle = "You Are";
    }
        Message = result;
}

function SetHelpDialog(x, y) 
{
    divHelp.innerHTML = Message;
        $('div#divHelp').dialog({
            height: "auto",
            position: [x,y],
            modal: true,
            overlay: { background: '#fff', opacity: '0.7'}
        });
    $get("ctl00_UpdateProgressButton").style.display = "none";
}

Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols

<System.Web.Script.Services.ScriptService()> _
<WebService(Namespace:="http://")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Public Class HelpService
    Inherits System.Web.Services.WebService

    <WebMethod(EnableSession:=True)> _
    Public Function YouAre() As String
        Dim CurrentUser As User = System.Web.HttpContext.Current.Session("CurrentUser")
        Try
            With CurrentUser
                Dim Title As String
                If .Title = "" Then
                    Title = "You have no title listed in Ultipro. To see more information on this topic click <a onclick=""DownLoadFile('http://Intranet/WebApps/ClientTrack3.5/Help/ClientTrackManual.pdf#ProgInfGeneral')"">here.</a>"
                Else
                    Title = .Title
                End If

                Dim JobDescription As String
                If .JobDescription = "" Then
                    JobDescription = "You have no Job Description listed in Ultipro. To see more information on this topic click <a onclick=""DownLoadFile('http://Intranet/WebApps/ClientTrack3.5/Help/ClientTrackManual.pdf#ProgInfGeneral')"">here.</a>"
                Else
                    JobDescription = .Title
                End If

                Dim Supervisor As String
                If .Supervisor = "" Then
                    Supervisor = "You have no Supervisor listed in Ultipro."
                Else
                    Supervisor = .Supervisor
                End If

                Dim Programs As String
                If .Programs = "" Then
                    Programs = "There are no programs on the Program Information page for which you are listed as a staff. To see more information on this topic click <a onclick=""DownLoadFile('http://Intranet/WebApps/ClientTrack3.5/Help/ClientTrackManual.pdf#ProgInfGeneral')"">here.</a>"

                Else
                    Programs = .Programs
                End If

                Return String.Format("<u>YOU ARE:</u><br />{0} {1}<br /><br />" _
                                    & "<u>YOUR LOGIN NAME IS:</u><br />{2}<br /><br />" _
                                    & "<u>YOUR TITLE IS:</u><br />" & Title & "<br /><br />" _
                                    & "<u>YOUR JOB DESCRIPTION IS:</u><br />" & JobDescription & "<br /><br />" _
                                    & "<u>YOUR SUPERVISOR IS:</u><br />" _
                                    & "(If incorrect click " & "<a onclick=""DownLoadFile('http://Intranet/WebApps/ClientTrack3.5/Help/ClientTrackManual.pdf#ProgInfGeneral')"">here.</a>)<br />" _
                                    & "{5}<br /><br />" _
                                    & "<u>THE PROGRAM(S) YOU ARE A {6} FOR ARE:</u><br /><div align=""center"" style=""text-align:left; float:left; width:auto; margin-left: auto; margin-right: auto; background-color: Aqua"">" & Programs & "</div>", _
                                    .FirstName, .LastName, _
                                    .UserName, _
                                    .Title, _
                                    .JobDescription, _
                                    .Supervisor, _
                                    .Title.ToUpper, _
                                    .Programs)
            End With
        Catch ex As Exception
            Return "Error<br />The following error has occurred in the You Are function of the Help Service Web Service<br /><br />'" & ex.Message & "'<br /><br />Copy and paste this message into an e-mail to the IT help desk or call the IT help desk and read this exact message to them."
        End Try
    End Function

End Class

Open in new window

0
Comment
Question by:leskelly
  • 4
  • 2
7 Comments
 

Author Comment

by:leskelly
Comment Utility
I also added the style sheets for the Master page and the Jquery dialog.
Dialog.css

div.ui-dialog 
{
    overflow: visible !important; /*Without this the width of the dialog shrinks to the width of the content.*/
	width: 420px !important;
	background: url(../Images/PopupBackround.jpg) repeat;
}

div.ui-dialog-content
{
	font-family: 'Lucida Calligraphy';
	padding: 10px;
	/*background: url(../Images/PopupBackround.jpg) repeat;*/
	font-weight: bold;
	color: #FFFF00;
	min-height: 113px;
	width: 400px !important;
	text-align: center;
}
div.ui-dialog-titlebar 
{
    width: 420px; /*Set the width of the title bar. It must be 20px more then the width of the content because the content has 10px padding*/
    background: url('../Images/Dialog/titlebarRight.png') no-repeat right; /*Places a rounded graphic in the right of the title bar*/
    height: 23px !important; /*Set the height of the title bar*/
	position: relative; /*If this is not set the closing X will not be positioned correctly*/
}

span.ui-dialog-title
{
	display: block;
	font-size: 18px;
	text-align: center;
	height: 23px;
	background: url('../Images/Dialog/titlebar.png') repeat-x top;
	margin: 0 9px; /*Set the left and right margins of the title.  If there is no margins the graphic set in the last line will go over the rounded end graphics.*/
	position: relative;
	padding-top: 1px;
	font-weight: bold;
	color: #00467F; /* Dark Blue*/
}

a.ui-dialog-titlebar-close
{
	/*Configure the closing X*/
	position: absolute;
	top: 2px;
	right: 10px;
	font-size: large;
	font-size: 18px;
	font-weight: bold;
	color: #00467F; /*Dark Blue*/
	text-decoration: none;
}

div.ui-dialog-container 
{
   background: url('../Images/Dialog/titlebarLeft.png') no-repeat top left; /*Places rounded graphic in the top left of the dialog (In the title bar)*/
}

div.ui-resizable-handle 
{
    /*If not set the shadow graphic could be resized.*/
    z-index: -1 !important;
}

/*The following 7 style rules place a shadow graphic aroung the dialog box.*/
div.ui-resizable-nw 
{
    background: url('../Images/Dialog/Shadow/shadow_01.png') no-repeat top right !important; 
    width: 117px !important;
    height: 112px !important;
    top: -42px !important;
    left: -62px !important;
}

div.ui-resizable-ne 
{
    background: url('../Images/Dialog/Shadow/shadow_03.png') no-repeat top left !important;
    width: 115px !important;
    height: 112px !important;
    top: -42px !important;
    right: -63px !important;
}

div.ui-resizable-e 
{
    background: url('../Images/Dialog/Shadow/shadow_06.png') repeat-y top left !important;
    width: 117px !important;
    height: auto !important;
    top: 70px !important;
    right: -65px !important;
    bottom: 46px !important;
}

div.ui-resizable-se 
{
    background: url('../Images/Dialog/Shadow/shadow_14.png') no-repeat top right !important;
    width: 117px !important;
    height: 113px !important;
    right: -65px !important;
    bottom: -67px !important;
}

div.ui-resizable-s 
{
    background: url('../Images/Dialog/Shadow/shadow_08.png') repeat-x bottom !important;
    width: 313px !important;
    height: 111px !important;
    right: -63px !important;
	bottom: -65px !important;
    left: 55px !important;
}

div.ui-resizable-sw 
{
    background: url('../Images/Dialog/Shadow/shadow_07.png') no-repeat top right !important;
    width: 115px !important;
    height: 111px !important;
    bottom: -65px !important;
    left: -60px !important;
}

div.ui-resizable-w 
{
    background: url('../Images/Dialog/Shadow/shadow_04.png') repeat-y top left !important;
    width: 115px !important;
    height: auto !important;
    top: 70px !important;
    bottom: 46px !important;
    left: -60px !important;
}

div.ui-dialog-buttonpane
{
	width: 400px;
	text-align: center;
	background-color: Black;
	height: 20px;
	vertical-align: middle;
	padding: 5px 10px 12px 10px;
}

div.ui-dialog-buttonpane button
{
	font-size: medium;
	font-weight: bold;
	color: #00467F;  /*Dark Blue*/
}

a
{
	color: #99FF33;
	text-decoration: underline;
	cursor: pointer;
}


Master.css
body
{
	margin: 0;
}

#divPageWrapper
{
	/* width: 1000px; */
	background: url(../Images/MasterHeaderBackround.jpg) repeat-y left top;
	background-color: #E1E1E1;
}

#divHeaderOne
{
	background: url(../Images/MasterBackround.jpg) repeat;
	height: 55px;
}

.HeaderOneImage
{
	margin-left: 10px;
	height: 55px;
}

#divMenu
{
	background: url(../Images/MasterMenuBackround.gif) repeat;
}

.StaticMenuItemStyle
{
	/* Defines the look of main menu items. */
	color: white;
	font-size: 16px;
	font-weight: bold;
	border-left: solid 1px white;
	text-align: center;
}

.StaticHoverStyle, .StaticSelectedStyle
{
	/* Defines the look of hover main menu items */
	background-color: silver;
}

.DynamicMenuStyle
{
	z-index: 1;
}

.DynamicMenuItemStyle
{
	/*Defines the sub menu items*/ 
	z-index: 1;
	color: white;
	font-size: 16px;
	font-weight: bold;
	background-color: silver;
	padding: 4px 2px 4px 3px;
}

.DynamicHoverStyle
{
	/*Defines the hover style of sub menus Currently does nothing.*/
	background-color: #808080;
	color: White;
}

/*.DynamicHoverStyle a
{
	 Removes the underline from links in the sub menus Currently does nothing.
	text-decoration: none;
}*/

#divHeaderTwo, #divHeaderThree
{
	background-color: #8FC3EA; /* Medium Blue*/
	/* width: 500px; */
	font-weight: bold;
	font-size: 35px;
	color: #00467F;
	float: left;
	border-bottom: solid 2px Gray;
}

#divHeaderTwo
{
	text-indent: 7px;
}

#divHeaderThree
{
	text-align: right;
}

#divHeaderThree .RecordsFor
{
	margin-right: 9px;
}

#divSideBar
{
	width: 102px;
	float: left;
}

#divSideBar a
{
	font-size: 18px;
	color: yellow;
	margin-left: 4px;
	margin-top: 10px;
	display: block;
	text-decoration: none;
	cursor: pointer;
}

#divMainContent
{
	/* width: 890px; */
	min-height: 549px;
	float: left;
}

#divFooter
{
	background-color: #D7E9F7;
	text-align: center;
	clear: both;
	padding-top: 2px;
	padding-bottom: 3px;
}

.Progress
{	background-position: center;
	min-height: 288px;
	width: 102px;
	background-image: url('../Images/PleaseWait.gif');
	background-repeat: repeat-y;
	margin-top: 15px;
	height: 19px;
}

.PleaseWait
{
	color: #FFFFFF;
	text-align: center;
}

Open in new window

0
 
LVL 1

Accepted Solution

by:
g3k0 earned 250 total points
Comment Utility
Whether a div is placed within another div dynamically or not, the styling can be done purely with css rules.  As long as the div has a width and the parent div has text-align: center, it should float in the middle in IE.  For real browsers you will need margin-left: auto and margin-right:auto on the child div.
0
 
LVL 7

Assisted Solution

by:jhp333
jhp333 earned 250 total points
Comment Utility
The style property in line 194 should have a specific width for the div to be centered. And I think the "float:left" is not necessary there.
For example,

194:                                   & "<u>THE PROGRAM(S) YOU ARE A {6} FOR ARE:</u><br /><div align=""center"" style=""text-align:left; width:80%; margin-left: auto; margin-right: auto; background-color: Aqua"">" & Programs & "</div>", _
0
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

 

Author Comment

by:leskelly
Comment Utility
Hello and thanks for your comments.

The inner div doesn't have a set width because it will vary depending on the content which changes depending on the user.  I did try giving it a set width just to see if that made a difference but it didn't.  So I'm thinking some how the combination of the outer div being a Jquery dialog and the inner div being dynamically created is short circuiting it.

I put the float:left in as without it and without a specific width the inner div expands to fill the outer div which of course is then centered but doesn't look as I want it to.

Any other thoughts?
0
 

Author Comment

by:leskelly
Comment Utility
Correction, putting in a specific width does center it.  When I last tried it I most have left in the float:left.  Anyway that still doesn't solve the issue of the need for a variable width.  If anyone has any thoughts on that I'd like to hear them.
0
 

Author Closing Comment

by:leskelly
Comment Utility
I have it worked out. First I removed the styles from the line where the inner dive is created:
 & "THE PROGRAM(S) YOU ARE A {6} FOR ARE:" & Programs & "", _

Then I added this code right after the JavaScript that creates the Jquery dialog:
    var divHelpInner = $("#divHelp > div")
    divHelpInner.css("float", "left");
    divHelpInner.css("width", $("#divHelp > div").width());
    divHelpInner.css("float", "none");
    divHelpInner.css("text-align", "left");
Note that you have to set the float option first so that the inner div is compressed to the width of the content.  You then get that width and set the css width of the inner div to it.  You then have to set float to "none" or else it still won't be centered.

As you both pointed me in the correct direction I'm splitting the points between you.  Thanks for your assistance.
0
 
LVL 7

Expert Comment

by:jhp333
Comment Utility
Having a div temporarily float to find out the required width is a neat solution.
Thank you for sharing it.
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Suggested Solutions

Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

744 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

13 Experts available now in Live!

Get 1:1 Help Now