Question

I wrote this code implemented in a much bigger solution. the point was to add an asp:ImageButton to an asp:GridView. Clicking this image button would trigger a javascript call to a JQuery dialog.

This dialog is bound to a div containing an asp:BulletedList.

Simple enough, and I got it to work, but when I click the button and the dialog opens, it shows up collapsed to only the title bar. I can resize and expand the window to show the contents but I’d like it to open to the right size from the get go.

Setting the Resizable option to false just blocks it in collapsed mode and I can’t see the data anymore. Also, opening the source code from the rendered page in IE displays an empty div (the div used by the dialog) while the dialog is collapsed to the title bar, but after I expand the window and display my BulletedList data, displaying the source code by right clicking the bullet list still shows an empty div…

Here is the code, the gridview is a lot bigger and item templates are used because each column has a specific header and footer but I took out all the non-related stuff.

.ascx file

The Javascript:

function ShowReferedTasks() {
    $('#litReferedTasks').dialog({
        autoOpen: true,
        modal: true,
        minHeight: 150,
        minWidth: 500,
        resizable: true
    });
}

The gridview containing the button that triggers the dialog:

<ext:GridView ID="gvTaskParameters" runat="server" AutoGenerateColumns="False" DataKeyNames="TaskParameterID"
    ShowFooter="<%# _isAdmin %>" ShowHeaderWhenEmpty="True" ShowFooterWhenEmpty="True"
    EmptyDataText="Aucun paramètre disponible" AllowPaging="True" 
    PagerSettings-Mode="NextPreviousFirstLast" 
    OnPageIndexChanging="gvTaskParameters_PageIndexChanging" OnRowCancelingEdit="gvTaskParameters_RowCancelingEdit"
    OnRowEditing="gvTaskParameters_RowEditing" OnRowDeleting="gvTaskParameters_RowDeleting"
    OnRowUpdating="gvTaskParameters_RowUpdating" OnRowCommand="gvTaskParameters_RowCommand"
    OnRowDataBound="gvTaskParameters_RowDataBound" 
    OnDataBound="gvTaskParameters_DataBound">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:ImageButton ID="ibViewTasks" runat="server" CausesValidation="False" CommandName="ViewTasks"
                    ImageAlign="Middle" ImageUrl="../../js/jquery-ui-1.8.19.custom/development-bundle/demos/images/icon-docs-info.gif" AlternateText="<%$ resources:resource, images_VoirTaches %>"
                    CommandArgument='<%# Eval("TaskParameterID") %>' />
                <%--<input id="ibViewTasks" class="ui-state-default ui-corner-all" type="image" src="../../js/jquery-ui-1.8.19.custom/development-bundle/demos/images/icon-docks-info.gif" value="button" />--%>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</ext:GridView>

The div bound to the dialog:

<div id="litReferedTasks" class="" title="Tâches Référées" style="background-color: White; position: absolute;">
    <div style="padding-left: 25px; padding-bottom: 25px; padding-right: 25px;">
        <asp:BulletedList ID="blReferedTasks" runat="server" DisplayMode="Text">
        </asp:BulletedList>
    </div>
</div>

Code Behind in C#:

else if (e.CommandName == "ViewTasks")
            {
                TaskParameterMapManager mgr = new TaskParameterMapManager(DatabaseConnection);
                int id = Convert.ToInt32(e.CommandArgument.ToString());
                var ts = mgr.GetTasks(id).OrderBy(t => t.TaskDescription);                

                this.blReferedTasks.DataSource = ts.ToList();
                this.blReferedTasks.DataTextField = "TaskDescription";
                this.blReferedTasks.DataBind();

                ScriptManager.RegisterStartupScript(this, this.GetType(), "Key_ShowReferedTasks", "ShowReferedTasks();", true);                
            }

Answer 1

The answer was, as @chris suggested, to remove the “position:absolute” style tag in the div used by the dialog.