need modal help

[JohnE]

I have a gridview with a linkbutton on it that shows the detail of the record
in a modal. In the modal I am using a Formview. Below is the source code
for the modal, including the css that it uses. My situation is the detail of
the gridview record (which only shows 6 fields) has a total of 50 fields for
the detail. All 50 will need to be seen and most updatable from the modal.

<%--//============= MODAL POPUP Start =============//--%>

<asp:Button ID="btnShowModalPopup" runat="server"
style="display:none" />

<cc1:ModalPopupExtender ID="mpuChangeRequestRecordDetail"
runat="server"
TargetControlID="btnShowModalPopup"
PopupControlID="divPopUp"
BackgroundCssClass="modalBackground"
DropShadow="true">
</cc1:ModalPopupExtender>

<br />

<div id="divPopUp" class="modalPopup" style="display:none;" >

<aspanel ID="pnlModalHeader" runat="server"
BackColor="Black" ForeColor="White" Font-Bold="true" Height="15px"
HorizontalAlign="Center" >
Change Request <asp:Label ID="lblChangeRequestID"
runat="server" ></asp:Label> Detail View
</aspanel>

<asp:FormView ID="fvwModalChangeRequestRecordDetail"
runat="server" DataKeyNames="ChangeRequestID" CssClass="popupControl" >
<ItemTemplate>
ID: <asp:Label ID="lblChangeRequestID"
runat="server" Text='<%# Eval("ChangeRequestID") %>' ></asp:Label><br /><br />
Originator: <asp:Label ID="lblOriginator"
runat="server" Text='<%# Bind("Originator") %>' ></asp:Label>
Origination Date: <asp:Label ID="lblOriginationDate"
runat="server" Text='<%# Bind("OriginationDate") %>' ></asp:Label><br /><br />

</ItemTemplate>

<EditItemTemplate>
<asp:TextBox ID="txtChangeRequest" runat="server"
Text='<%# Bind("ChangeRequest") %>' ></asp:TextBox>
</EditItemTemplate>

</asp:FormView>

<br />

<asp:Button ID="btnCloseFormView" runat="server"
Text="Close" />

<br />

</div>


<%--//============= MODAL POPUP End =============//--%>

/*== Modal Popup ========================================
*/

..modalBackground
{
background-color: Gray;
filter: alpha(opacity=80);
opacity: 0.8;
}

..modalPopup
{
background-color: #ffffdd;
border-width: 3px;
border-style: solid;
border-color: Gray;
padding: 5px;
width: 600px;
height: 500px;
}

..popupControl
{
background-color: #AAD4FF;
border-style: solid;
border-color: black;
border-width: 2px;
width: 100%;
font-size: 12px;
}

Is there a better way to go about showing the 50 fields without having a
long modal? Can scrollbars (which I donot see a property for) be added? If
so, how?

I am open to thoughts and suggestions regarding this. What is done here
will be used in several other webapps that will be done.

Thank you in advance for your time regarding this.

.... John

 

[Guest]

I have a gridview with a linkbutton on it that shows the detail of the record
in a modal.  In the modal I am using a Formview.  Below is the source code
for the modal, including the css that it uses.  My situation is the detail of
the gridview record (which only shows 6 fields) has a total of 50 fields for
the detail.  All 50 will need to be seen and most updatable from the modal.  

<%--//============= MODAL POPUP Start  =============//--%>

            <asp:Button ID="btnShowModalPopup" runat="server"
style="display:none" />

            <cc1:ModalPopupExtender ID="mpuChangeRequestRecordDetail"
runat="server"
                    TargetControlID="btnShowModalPopup"
                    PopupControlID="divPopUp"
                    BackgroundCssClass="modalBackground"
                    DropShadow="true">
            </cc1:ModalPopupExtender>

            <br />

            <div id="divPopUp" class="modalPopup" style="display:none;" >

                <aspanel ID="pnlModalHeader" runat="server"
BackColor="Black" ForeColor="White" Font-Bold="true" Height="15px"
HorizontalAlign="Center" >
                    Change Request <asp:Label ID="lblChangeRequestID"
runat="server" ></asp:Label> Detail View
                </aspanel>

                <asp:FormView ID="fvwModalChangeRequestRecordDetail"
runat="server" DataKeyNames="ChangeRequestID" CssClass="popupControl" >
                    <ItemTemplate>
                        ID: <asp:Label ID="lblChangeRequestID"
runat="server" Text='<%# Eval("ChangeRequestID") %>' ></asp:Label><br /><br />
                        Originator: <asp:Label ID="lblOriginator"
runat="server" Text='<%# Bind("Originator") %>' ></asp:Label>  
                        Origination Date: <asp:Label ID="lblOriginationDate"
runat="server" Text='<%# Bind("OriginationDate") %>' ></asp:Label><br /><br />

                    </ItemTemplate>

                    <EditItemTemplate>
                        <asp:TextBox ID="txtChangeRequest" runat="server"
Text='<%# Bind("ChangeRequest") %>' ></asp:TextBox>
                    </EditItemTemplate>

                </asp:FormView>

                <br />

                <asp:Button ID="btnCloseFormView" runat="server"
Text="Close" />

                <br />

            </div>

<%--//============= MODAL POPUP End  =============//--%>

/*== Modal Popup ========================================
*/

.modalBackground
{
        background-color: Gray;
        filter: alpha(opacity=80);
        opacity: 0.8;

}

.modalPopup
{
        background-color: #ffffdd;
        border-width: 3px;
        border-style: solid;
        border-color: Gray;
        padding: 5px;
        width: 600px;
        height: 500px;

}

.popupControl
{
        background-color: #AAD4FF;
        border-style: solid;
        border-color: black;
        border-width: 2px;
        width: 100%;
        font-size: 12px;

}

Is there a better way to go about showing the 50 fields without having a
long modal?  Can scrollbars (which I donot see a property for) be added?  If
so, how?

I am open to thoughts and suggestions regarding this.  What is done here
will be used in several other webapps that will be done.

Thank you in advance for your time regarding this.

... John

A scrollable area you can usually make using div and css

Set div's style to "overflow: auto; height: 300px" and see what
happens

Hope this helps