Progamatically resizing a Jquery UI dialog after it is opened.

I have a an asp.NET application that has a login page with a Jquery dialog box on it.  In the dialog are fields for a user name and passwords, a login button and a cancel button. After the user fills in the user name and password they hit the login button which calls a web service that authenticates them against windows.  If they enter an invalid user name or password the web service sends a message back to the browser which is then displayed above the user name field.  Initially the dialog height option is set to "auto" and it opens with enough room for the given fields and buttons.  When the message gets displayed it shoves everything down and to some extend out of the dialog box.  I had thought having the dialog height option set to "auto" would take care of that but it doesn't.

Any suggestions would be greatly appreciated.

So that is my question, how do I get the dialog to expand to fit the additional content.

Below is the HTML and JavaScript.
<%@ Page Language="VB" MasterPageFile="~/MasterPages/ClientTrack.master" AutoEventWireup="false" CodeFile="Login.aspx.vb" Inherits="Login" Title="Login" %>

<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="Server">
    <script src="js/Login.js" type="text/javascript"></script>
</asp:Content>

<asp:Content ID="Content1" runat="server" ContentPlaceHolderID="cp1">
    <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
        <Services>
            <asp:ServiceReference Path="~/WebServices/LoginService.asmx" />
        </Services>
    </asp:ScriptManagerProxy>

    <div id="divLogin" title="Login" >
        <br />
        <div id="lblLoginMessage" visible="false"></div>
        <span id="lblUserName" style="width:112px; display:inline-block;">User Name:</span>
        <asp:TextBox ID="txtUserName" runat="server" Width="150px"></asp:TextBox>
        <br />
        <span id="lblPassWord" style="width:112px; display:inline-block;">Pass Word:</span>
        <asp:TextBox ID="txtPassWord" runat="server" Width="150px" TextMode="Password" ></asp:TextBox>
        <br /><br />
    </div>
</asp:Content>

function OpenLoginDialog() 
{
    $('div#divLogin').dialog({
        height: "auto",
        position: [340, 300],
        modal: true,
        overlay: { background: '#fff', opacity: '0.7' },
        buttons: { "Login": function() { Login(ctl00_cp1_txtUserName.value, ctl00_cp1_txtPassWord.value); }, "Cancel": function() { window.close(); } }
    });   
}

function Login(UserName, Password)
{
    LoginService.Login(UserName, Password, LoginCallBack);
}

function LoginCallBack(result) 
{
    if (result =="Login succeded")
    {
        $('div#divLogin').dialog("destroy");
    }
    else
    {
        lblLoginMessage.innerHTML = result + "<br><br>";
        lblLoginMessage.visible = "true";
    }
}

Open in new window

leskellyAsked:
Who is Participating?
 
Terry_focusConnect With a Mentor Commented:
Hmmmmm,

You can try using the height of the box after the label has been shown, or adding the height of the label of the box
function LoginCallBack(result) 
{
    if (result =="Login succeded")
    {
        $('div#divLogin').dialog("destroy");
    }
    else
    {
        lblLoginMessage.innerHTML = result + "<br><br>";
        lblLoginMessage.visible = "true";
        //Using the height of the div
        $('div#divLogin').dialog("option","height",$('div#divLogin').height());
    }
}

function LoginCallBack(result) 
{
    if (result =="Login succeded")
    {
        $('div#divLogin').dialog("destroy");
    }
    else
    {
        lblLoginMessage.innerHTML = result + "<br><br>";
        lblLoginMessage.visible = "true";
        //Add the height of the lbl, for this you can get the height of the #divLogin earlier and store it globally or use a fixed value like like this, (450 is the supposed height of the dialog)     
        $('div#divLogin').dialog("option","height",450+$("#lblLoginMessage").height());
    }
}

Open in new window

0
 
Terry_focusCommented:
You can change the dialog height when you message is displayed using the setter's of jquery dialog
function LoginCallBack(result) 
{
    if (result =="Login succeded")
    {
        $('div#divLogin').dialog("destroy");
    }
    else
    {
        lblLoginMessage.innerHTML = result + "<br><br>";
        lblLoginMessage.visible = "true";
        //This will adjust the height to 450px but just change to what ever you need
        $('div#divLogin').dialog("option","height",450);
    }
}

Open in new window

0
 
leskellyAuthor Commented:
Hello Terry,

Thanks for the response.  I was hoping there was a way to get it to automatically size to fit the content as I may want it to display different messages and would rather not have to figure out what size to make it for each message.  Is there anyway to do this?

I did try the method you suggested though which resulted in another issue.  It appears that the dialog is expanding but the content is not as the content is styled to have an image as it's background but it does not show up in the expanded area.
0
 
leskellyAuthor Commented:
That was the ticket.  I just modified it slightly to take into account the height of the button pane and to have it calculate the height of the dialog as well:
        $('div#divLogin').dialog("option", "height", 23 + $("#divLogin").height() + $("#lblLoginMessage").height());

I resolved the issue with the background image by setting it to the dialog instead of the content.

Thanks for your assistance.
0
 
Terry_focusCommented:
no probs, glad to help
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.