Solved

Progamatically resizing a Jquery UI dialog after it is opened.

Posted on 2010-08-25
5
768 Views
Last Modified: 2012-05-10
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

0
Comment
Question by:leskelly
  • 3
  • 2
5 Comments
 
LVL 10

Expert Comment

by:Terry_focus
Comment Utility
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
 

Author Comment

by:leskelly
Comment Utility
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
 
LVL 10

Accepted Solution

by:
Terry_focus earned 500 total points
Comment Utility
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
 

Author Closing Comment

by:leskelly
Comment Utility
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
 
LVL 10

Expert Comment

by:Terry_focus
Comment Utility
no probs, glad to help
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

DOM Attributes and Properties treatment with jQuery 1.6 by Ivo Stoykov jQuery (http://jquery.com/) 1.6 introduces .prop() (http://api.jquery.com/prop/) and .removeProp() (http://api.jquery.com/removeProp/) methods which allow modifying or removi…
What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

772 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

12 Experts available now in Live!

Get 1:1 Help Now