|
|
Rank: Newbie
Groups: Member
Joined: 6/13/2007
Posts: 9
|
Hello, I used the DatePicker Title and Footer example to create the menu with year selection. It works great, but for some reason it does not work when placed into a dialog - the menus appear semi-transparent. Here's the screen shot:  Could you please advise on how to fix this? Thanks! BTW, here's that it's supposed to look like (screen shot done with the same picker outside of the dialog): 
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi, Thanks for reporting the issue. We tried the following code and it appears to work fine (mostly copied from the sample code):
Code: HTML/ASPX
<%@ Register TagPrefix="eo" Namespace="EO.Web" Assembly="EO.Web" %>
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="EO.Web.Demo.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<title>WebForm1</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<script type="text/javascript">
var g_curCalendar = null;
function ShowMonthPopup(calendar, refLink)
{
g_curCalendar = "DatePicker1";
var monthPicker = document.getElementById(refLink);
eo_GetObject(g_curCalendar).showContextMenu(monthPicker, "mnuMonth");
}
function MonthMenuClicked(e, info)
{
var month = info.getItem().getIndex();
var calendar = eo_GetObject(g_curCalendar);
//Get the current month
var curMonth = calendar.getVisibleDate();
//Change the month
curMonth.setMonth(month);
//Set the new current month
calendar.goTo(curMonth);
}
function ShowYearPopup(calendar, refLink)
{
g_curCalendar = "DatePicker1";
var yearPicker = document.getElementById(refLink);
eo_GetObject(g_curCalendar).showContextMenu(yearPicker, "mnuYear");
}
function YearMenuClicked(e, info)
{
var year = info.getItem().getIndex();
var calendar = eo_GetObject(g_curCalendar);
//Get the current month
var curMonth = calendar.getVisibleDate();
//Set the new year
curMonth.setFullYear(year + 1980);
//Set the new current month
calendar.goTo(curMonth);
}
</script>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<eo:Dialog id="Dialog1" style="Z-INDEX: 101; LEFT: 72px; POSITION: absolute; TOP: 72px" runat="server"
Height="230px" Width="344px" BorderWidth="1px" BorderStyle="Solid" ControlSkinID="None"
BorderColor="#728EB8" HeaderHtml="Test" CloseButtonUrl="00070201" InitialState="Visible"
BackColor="White">
<ContentTemplate>
<eo:DatePicker runat="server" id="DatePicker1" DayHeaderFormat="Short" TitleFormat="MMMM, yyyy"
TitleLeftArrowImageUrl="DefaultSubMenuIconRTL" DayCellHeight="15" OtherMonthDayVisible="True"
DayCellWidth="31" TitleRightArrowImageUrl="DefaultSubMenuIcon" TitleTemplateScope="TextOnly">
<TitleTemplate>
{var:visible_date:MMMM}
<a id="month_picker2" href="javascript:ShowMonthPopup(false, 'month_picker2')"><img src="{img:00020012}" border="0" /></a>
{var:visible_date:yyyy}
<a id="year_picker2" href="javascript:ShowYearPopup(false, 'year_picker2')"><img src="{img:00020012}" border="0" /></a>
</TitleTemplate>
<SelectedDayStyle CssText="background-image:url('00040403');color:Brown;"></SelectedDayStyle>
<DisabledDayStyle CssText="color: gray"></DisabledDayStyle>
<TitleArrowStyle CssText="cursor: hand"></TitleArrowStyle>
<TitleStyle CssText="font-family:Verdana;font-size:8.75pt;padding-bottom:5px;padding-left:5px;padding-right:5px;padding-top:5px;"></TitleStyle>
<CalendarStyle CssText="background-color:white;border-bottom-color:Silver;border-bottom-style:solid;border-bottom-width:1px;border-left-color:Silver;border-left-style:solid;border-left-width:1px;border-right-color:Silver;border-right-style:solid;border-right-width:1px;border-top-color:Silver;border-top-style:solid;border-top-width:1px;color:#2C0B1E;padding-bottom:5px;padding-left:5px;padding-right:5px;padding-top:5px;"></CalendarStyle>
<DayHoverStyle CssText="background-image:url('00040402');color:#1c7cdc;"></DayHoverStyle>
<MonthStyle CssText="cursor:hand;font-family:Verdana;font-size:8pt;margin-bottom:0px;margin-left:4px;margin-right:4px;margin-top:0px;"></MonthStyle>
<FooterTemplate>
<table style="font-size: 11px; font-family: Verdana" border="0" cellSpacing="5" cellPadding="0">
<tr>
<td width="30"></td>
<td valign="center"><img src="{img:00040401}"></td>
<td valign="center">Today: {var:today:MM/dd/yyyy}</td>
</tr>
</table>
</FooterTemplate>
<TodayStyle CssText="background-image:url('00040401');color:#1176db;"></TodayStyle>
<DayHeaderStyle CssText="border-bottom: #f5f5f5 1px solid"></DayHeaderStyle>
</eo:DatePicker>
</ContentTemplate>
<FooterStyleActive CssText="padding-right: 4px; padding-left: 4px; font-size: 11px; padding-bottom: 4px; padding-top: 4px; font-family: verdana; background-color: #f8fafd"></FooterStyleActive>
<HeaderStyleActive CssText="padding-right: 4px; padding-left: 4px; font-size: 11px; background-image: url(00070202); padding-bottom: 2px; padding-top: 2px; font-family: arial"></HeaderStyleActive>
<ContentStyleActive CssText="padding-right: 4px; padding-left: 4px; font-size: 11px; padding-bottom: 4px; padding-top: 4px; font-family: verdana; background-color: #f8fafd"></ContentStyleActive>
</eo:Dialog>
<eo:ContextMenu runat="server" id="mnuMonth" ControlSkinID="None" Width="80px" ClientSideOnItemClick="MonthMenuClicked">
<TopGroup Style-CssText="border-left-color:#e0e0e0;border-left-style:solid;border-left-width:1px;border-right-color:#e0e0e0;border-right-style:solid;border-right-width:1px;border-top-color:#e0e0e0;border-top-style:solid;border-top-width:1px;cursor:hand;font-family:arial;font-size:12px;padding-bottom:3px;padding-left:10px;padding-right:10px;padding-top:3px;"
OffsetX="0" OffsetY="-100">
<Items>
<eo:MenuItem Text-Html="January"></eo:MenuItem>
<eo:MenuItem Text-Html="February"></eo:MenuItem>
<eo:MenuItem Text-Html="March"></eo:MenuItem>
<eo:MenuItem Text-Html="April"></eo:MenuItem>
<eo:MenuItem Text-Html="May"></eo:MenuItem>
<eo:MenuItem Text-Html="June"></eo:MenuItem>
<eo:MenuItem Text-Html="July"></eo:MenuItem>
<eo:MenuItem Text-Html="August"></eo:MenuItem>
<eo:MenuItem Text-Html="September"></eo:MenuItem>
<eo:MenuItem Text-Html="October"></eo:MenuItem>
<eo:MenuItem Text-Html="November"></eo:MenuItem>
<eo:MenuItem Text-Html="December"></eo:MenuItem>
</Items>
</TopGroup>
<LookItems>
<eo:MenuItem HoverStyle-CssText="color:#1C7CDC;padding-left:5px;padding-right:5px;" ItemID="_Default"
NormalStyle-CssText="color:#2C0B1E;padding-left:5px;padding-right:5px;">
<SubMenu Style-CssText="background-color:White;border-bottom-color:#e0e0e0;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#e0e0e0;border-left-style:solid;border-left-width:1px;border-right-color:#e0e0e0;border-right-style:solid;border-right-width:1px;border-top-color:#e0e0e0;border-top-style:solid;border-top-width:1px;color:#606060;cursor:hand;font-family:arial;font-size:12px;padding-bottom:3px;padding-left:3px;padding-right:3px;padding-top:3px;"
ShadowDepth="0" ItemSpacing="5"></SubMenu>
</eo:MenuItem>
</LookItems>
</eo:ContextMenu>
<eo:ContextMenu runat="server" id="mnuYear" ControlSkinID="None" Width="80px" ClientSideOnItemClick="YearMenuClicked"
EnableScrolling="True" ScrollUpLookID="scroll_up" ScrollDownLookID="scroll_down">
<TopGroup Style-CssText="border-left-color:#e0e0e0;border-left-style:solid;border-left-width:1px;border-right-color:#e0e0e0;border-right-style:solid;border-right-width:1px;border-top-color:#e0e0e0;border-top-style:solid;border-top-width:1px;cursor:hand;font-family:arial;font-size:12px;padding-bottom:3px;padding-left:10px;padding-right:10px;padding-top:3px;"
OffsetX="0" Height="150" OffsetY="-50">
<Items>
<eo:MenuItem Text-Html="1980"></eo:MenuItem>
<eo:MenuItem Text-Html="1981"></eo:MenuItem>
<eo:MenuItem Text-Html="1982"></eo:MenuItem>
<eo:MenuItem Text-Html="1983"></eo:MenuItem>
<eo:MenuItem Text-Html="1984"></eo:MenuItem>
<eo:MenuItem Text-Html="1985"></eo:MenuItem>
<eo:MenuItem Text-Html="1986"></eo:MenuItem>
<eo:MenuItem Text-Html="1987"></eo:MenuItem>
<eo:MenuItem Text-Html="1988"></eo:MenuItem>
<eo:MenuItem Text-Html="1989"></eo:MenuItem>
<eo:MenuItem Text-Html="1990"></eo:MenuItem>
<eo:MenuItem Text-Html="1991"></eo:MenuItem>
<eo:MenuItem Text-Html="1992"></eo:MenuItem>
<eo:MenuItem Text-Html="1993"></eo:MenuItem>
<eo:MenuItem Text-Html="1994"></eo:MenuItem>
<eo:MenuItem Text-Html="1995"></eo:MenuItem>
<eo:MenuItem Text-Html="1996"></eo:MenuItem>
<eo:MenuItem Text-Html="1997"></eo:MenuItem>
<eo:MenuItem Text-Html="1998"></eo:MenuItem>
<eo:MenuItem Text-Html="1999"></eo:MenuItem>
<eo:MenuItem Text-Html="2000"></eo:MenuItem>
<eo:MenuItem Text-Html="2001"></eo:MenuItem>
<eo:MenuItem Text-Html="2002"></eo:MenuItem>
<eo:MenuItem Text-Html="2003"></eo:MenuItem>
<eo:MenuItem Text-Html="2004"></eo:MenuItem>
<eo:MenuItem Text-Html="2005"></eo:MenuItem>
<eo:MenuItem Text-Html="2006"></eo:MenuItem>
<eo:MenuItem Text-Html="2007"></eo:MenuItem>
<eo:MenuItem Text-Html="2008"></eo:MenuItem>
</Items>
</TopGroup>
<LookItems>
<eo:MenuItem HoverStyle-CssText="color:#1C7CDC;padding-left:5px;padding-right:5px;" ItemID="_Default"
NormalStyle-CssText="color:#2C0B1E;padding-left:5px;padding-right:5px;">
<SubMenu Style-CssText="background-color:White;border-bottom-color:#e0e0e0;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#e0e0e0;border-left-style:solid;border-left-width:1px;border-right-color:#e0e0e0;border-right-style:solid;border-right-width:1px;border-top-color:#e0e0e0;border-top-style:solid;border-top-width:1px;color:#606060;cursor:hand;font-family:arial;font-size:12px;padding-bottom:3px;padding-left:3px;padding-right:3px;padding-top:3px;"
ShadowDepth="0" ItemSpacing="5"></SubMenu>
</eo:MenuItem>
<eo:MenuItem Height="14" ItemID="scroll_down" NormalStyle-CssText="background-image:url('00020005');border-bottom-color:#E0E0E0;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#E0E0E0;border-left-style:solid;border-left-width:1px;border-right-color:#E0E0E0;border-right-style:solid;border-right-width:1px;border-top-color:#E0E0E0;border-top-style:solid;border-top-width:1px;"
Image-Url="00020001"></eo:MenuItem>
<eo:MenuItem Height="14" ItemID="scroll_up" NormalStyle-CssText="background-image:url('00020005');border-bottom-color:#E0E0E0;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#E0E0E0;border-left-style:solid;border-left-width:1px;border-right-color:#E0E0E0;border-right-style:solid;border-right-width:1px;border-top-color:#E0E0E0;border-top-style:solid;border-top-width:1px;"
Image-Url="00020000"></eo:MenuItem>
</LookItems>
</eo:ContextMenu>
</form>
</body>
</HTML>
You mind to give it a try and see if it works for you? If it does, then some thing in your page must have triggered it. In that case, please try to comment your page content block by block and see what caused it. Once we know that, we can then try to reproduce it in our environment and see what we can do. Thanks
|
|
Rank: Newbie
Groups: Member
Joined: 6/13/2007
Posts: 9
|
Thanks for the quick response, I'll give it a try.
I quite forgot to mention that the datepicker in question was wrapped in a web user control + the dialog was loading the separate page containing that control using ContentUrl. Could that be a problem?
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Based on the test code posted above, we moved the dialog content into a separate page and it still works fine. The calendar drop down/popup menu won't go out of the dialog boundary though if you use it this way. When everything is inside the page, there are no such limitations.
|
|
Rank: Newbie
Groups: Member
Joined: 6/13/2007
Posts: 9
|
I still haven't tried the code you posted, but I've downloaded the 2007.2 (I was using 2007.1) and found that the problem was still there.
Also - I've just noticed that the problem shows up in IE7 but it does NOT show up in FireFox. I wonder if you are using FireFox as well.
Thanks!
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
stas wrote:I still haven't tried the code you posted, but I've downloaded the 2007.2 (I was using 2007.1) and found that the problem was still there.
Also - I've just noticed that the problem shows up in IE7 but it does NOT show up in FireFox. I wonder if you are using FireFox as well.
Thanks! We tested on IE 6, IE 7, FireFox and Safari. Please run the test code and see what you get.
|
|