Hello there again!
I am building a gallery for a site and I am using a gridview to do this. The idea is to have a GridView which shows the gallery items, the user clicks anywhere on a line in the Gridview and a ModalPopup pops up to show the gallery item's details.
I am however encountering two problems:
1) The ModalPopup is somehow increasing the size of the whole page (Scrollbars appear or get larger) which causes it to center wrong and gives problems dragging it (While dragging the scrollbars resize which offsets the dragging and it ends up at an other place then you wanted it).
2) The ModalPopup is not being shown at all in Firefox when you click the Gridview. The Event fires, and it gets inside the if statement, but ModalPopup1.Show() simply does not work.
Any ideas?
Skorp
- Link:Here
- Code:
<%@dotnet.itags.org. Page Language="C#" MasterPageFile="../Ap.master" Title="DiceTroll Gallery" validateRequest="false" %<%@dotnet.itags.org. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<%@dotnet.itags.org. mastertype virtualpath="../Ap.master" %>
<%@dotnet.itags.org. Reference VirtualPath="../S.master" %>
<%@dotnet.itags.org. Import Namespace="System.Data.Odbc" %>
<%@dotnet.itags.org. Import Namespace="DTNameSpace" %
<script runat="server">
DTUser user;
DTSettings settings;
int ID;
protected void Page_Load(object sender, EventArgs e)
{
user = Master.Master.currUser;
settings = Master.Master.currSettings;
Load_DropDown();
Load_Grid();
}
void Load_Grid()
{
//Some SQL stuff
}
void Load_DropDown()
{
//Some SQL stuff
}
protected void DropDown_Event(Object sender, EventArgs e)
{
string SelectedCat = CatDropDown.SelectedValue;
if (SelectedCat != "Show All Galleries")
SqlDataSource1.SelectCommand = "//Some SQL stuff";
else
{
SqlDataSource1.SelectCommand = "//Some SQL stuff";
GridView1.DataBind();
}
Page.Focus();
}
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.DataItemIndex == -1)
return;
e.Row.Attributes.Add("onMouseOver",
"this.style.cursor='hand';");
e.Row.Attributes.Add("onclick",
this.GetPostBackClientEvent(GridView1,
"Select$" + e.Row.RowIndex.ToString()));
}
protected void GridView_SelectRow(object sender, EventArgs e)
{
GridViewRow row = ((GridView)sender).SelectedRow;
if (row != null)
{
ModalPopupExtender1.Show();
}
}
</script
<asp:content id="mainPageC" contentplaceholderid="mainPageCPH" runat="server">
<div class="tablecontent" style="margin-top: 20px; margin-bottom: 20px; margin-left: 20px;">
<asp:ScriptManager id="ScrMan1" runat="server" EnablePartialRendering="true" ></asp:ScriptManager>
<asp:UpdatePanel id="UpPan1" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:SqlDataSource ID="SqlDataSource2" Runat="server"
SelectCommand = "//Some SQL stuff" />
<b>Gallery Sections:</b><br />
<asp:DropDownList ID="CatDropDown" runat="server"
AutoPostBack="True"
OnSelectedIndexChanged="DropDown_Event"
DataSourceID="SqlDataSource2"
DataTextField="Category"
DataValueField="ID"
AppendDataBoundItems="true">
<asp:ListItem Value="Show All Galleries" Selected="true">Show All Galleries</asp:ListItem>
</asp:DropDownList><br /><br />
<asp:GridView ID="GridView1" Runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="False" AllowSorting="True" AllowPaging="True" DataKeyNames="ID" Width="90%" OnRowDataBound="GridView1_RowDataBound" OnSelectedIndexChanged="GridView_SelectRow">
<RowStyle backcolor="#E6E9EC" forecolor="#679DE7" Font-Bold="True" BorderColor="#E6E9EC" />
<AlternatingRowStyle backcolor="#CAD1D8" forecolor="#679DE7" Font-Bold="True" BorderColor="#CAD1D8" />
<HeaderStyle backcolor="#425674" forecolor="#FFFFFF" Font-Bold="True" Font-Underline="False" BorderColor="#679DE7" />
<Columns>
<asp:CommandField SelectText ="Select" ShowSelectButton="true" ItemStyle-CssClass = "HideButton" HeaderStyle-CssClass ="HideButton" />
<asp:imagefield dataimageurlfield="thumbnail"
dataimageurlformatstring="http://www.dicetroll.com/thumbnail_images/{0}"
alternatetext="Image"
nulldisplaytext="No image on file."
headertext="Image" />
<asp:BoundField DataField="title" HeaderText="Title" SortExpression="title" />
<asp:BoundField DataField="vchnickname" HeaderText="Author" SortExpression="vchnickname" />
<asp:BoundField DataField="Date_approved" HeaderText="Date" SortExpression="Date_approved" />
<asp:BoundField DataField="views" HeaderText="Views" SortExpression="views" />
<asp:BoundField DataField="nCount" HeaderText="Reviews" SortExpression="nCount" />
<asp:BoundField DataField="nScore" HeaderText="Score" SortExpression="nScore" />
</Columns>
</asp:GridView><br />
<asp:SqlDataSource ID="SqlDataSource1" Runat="server"
SelectCommand = "//Some SQL stuff" />
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
PopupControlID="GalleryPanel"
PopupDragHandleControlID="GalleryHeader"
CancelControlID="GalleryClose"
OkControlID="GalleryClose"
TargetControlID="HiddenModalTrigger"
DropShadow="true" />
<asp:Button ID="HiddenModalTrigger" runat="server" Style="display: none;" />
<asp:Panel ID="GalleryPanel" runat="server" CssClass="ModalPopup" style="display:none">
<asp:Panel id="GalleryHeader" runat="server">
<div style="width: 100%; text-align: right; background-color: #425674; border: 1px #CAD1D8;">
<asp:LinkButton ID="GalleryClose" runat="server" Layout="not set" style="font: bold 14px arial; color: White; text-decoration: none;">Close</asp:LinkButton>
</div>
</asp:Panel>
<p style="font-family: georia, serif; font-size: 20px; font-weight: bold; font-variant:small-caps; text-decoration: none; color: #B82223;">
<asp:Label ID="GalleryTitle" runat="server" Text="" />
</p>
<asp:Image ID="GalleryPic" runat="server" /><br />
<asp:Label ID="GalleryText" runat="server" Text="" /></br />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress id="UpProg1" runat="server">
<ProgressTemplate>
<div style="width:100%; height: 50px; background-image: url(Loading.gif); background-position: center center; background-repeat:no-repeat;"></div>
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</asp:content>
I can answer the FireFox question - Modal is broke with Firefox 2.0.0.2 (prev versions should work fine) MSFT and FF are supposedly working together to resolve the issue...
Your other issue is most likely how your CSS is structured...causing the scrolling... setting explicit width and height in pixels may resolve the issue. Considering this is displaying images - if the images vary in size could possibly end itself to this particular behavior...
Well, that wasn't really the news I was hoping to hear abour FF... Is there any ETA on the fix, or is it such low priority that we can wait forever?
The CSS I am using is the following, the images will be having a fixed width but variable height:
.ModalPopup
{
width: 750px;
background-color: #E6E9EC;
font-family: georia, serif;
font-size: 12px;
text-decoration: none;
text-align: left;
color: #000000;
border: 1px solid #CDDFF7;
}
I don't really see anything wrong with it other then setting no height, so I tried setting it but it still showed the same problem.
