?
Solved

Progamatically resizing a Jquery UI dialog after it is opened.

Posted on 2010-08-25
5
Medium Priority
?
785 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
[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
  • 3
  • 2
5 Comments
 
LVL 10

Expert Comment

by:Terry_focus
ID: 33531319
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
ID: 33531543
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 2000 total points
ID: 33531676
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
ID: 33531977
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
ID: 33532071
no probs, glad to help
0

Featured Post

Want to be a Web Developer? Get Certified Today!

Enroll in the Certified Web Development Professional course package to learn HTML, Javascript, and PHP. Build a solid foundation to work toward your dream job!

Question has a verified solution.

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

I have answered several questions lately that were solved utilizing the power of jQuery's AJAX functions, so I thought I would write an article demonstrating the ease of use. Why should I use jQuery as opposed to regular JavaScript? Now I know…
The most up-to-date version of this article is on my Blog https://iconoun.com/blog/
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)
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…
Suggested Courses

762 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