I have a two column dhtmllayout. In top column i have input element and image. While in second col i have grid. I attached dhtmlCalendar to input element and clicking in input box brings up Calendar correctly.
However wheni try to attach Calendar with image as given in samples\01_initialization\07_calendar_sensitive.html . Clicking the image does bring up the calendar but it appears behind the Grid in second column. I tried to set z-index of all related div elements but makes no difference.
Please provide the complete demo to recreate the problem
I have a similar problem.
When I attach a calendar to a text input in a grid header it works.
However when I attach it an image, the calendar does not stay in front of the grid.
Here’s an example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Setting sensitive range</title>
<link rel="stylesheet" href="/dhtmlxCalendar/codebase/dhtmlxcalendar.css" type="text/css" />
<link rel="stylesheet" href="/dhtmlxCalendar/codebase/skins/dhtmlxcalendar_dhx_skyblue.css" type="text/css" />
<link rel="stylesheet" href="/dhtmlxGrid/codebase/dhtmlxgrid.css" type="text/css" />
<link rel="stylesheet" href="/dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_skyblue.css" type="text/css" />
<script type="text/javascript" src="/dhtmlxCalendar/codebase/dhtmlxcommon.js"></script>
<script type="text/javascript" src="/dhtmlxCalendar/codebase/dhtmlxcalendar.js"></script>
<script type="text/javascript" src="/dhtmlxGrid/codebase/dhtmlxcommon.js"></script>
<script type="text/javascript" src="/dhtmlxGrid/codebase/dhtmlxgrid.js"></script>
<script type="text/javascript" src="/dhtmlxGrid/codebase/dhtmlxgridcell.js"></script>
<script type="text/javascript">
var myCal, myGrid;
function loadCalendar(calendarID) {
myCal = new dhtmlxCalendarObject(calendarID, true, {isMonthEditable: true, isYearEditable: true, isWinHeader: true, isWinDrag: false});
myCal.setSkin("dhx_skyblue");
myCal.setDateFormat('%d/%m/%Y');
myCal.setOnClickHandler(selectCalendarDate);
}
function loadGrid() {
var calendar = "<div style=\"position:relative; background-color: #fff; border: #a4bed4 1px solid; height: 20px; width: 100px\">" +
"<input type=\"text\" onchange=\"updateCalendar(this);\" id=\"calText\" style=\"border-width:0px; height: 18px; width: 80px;\" />" +
"<img style=\"float: right; padding-right: 2px; cursor:pointer;\" onclick=\"showCalendar('calObj')\" src=\"/dhtmlxCalendar/codebase/imgs/calendar.gif\" alt=\"Show Calendar\" title=\"Show Calendar\" />" +
"<div id=\"calObj\" style=\"position:absolute; left:100px; top:0px; display:none\"></div></div>";
myGrid = new dhtmlXGridObject('gridbox');
myGrid.setImagePath("/dhtmlxGrid/codebase/imgs/");
myGrid.setHeader("col 1,col 2");
myGrid.setInitWidths("120,120");
myGrid.setSkin("dhx_skyblue");
myGrid.init();
myGrid.attachHeader(calendar + ",#rspan");
myGrid.parse([[11,12],[21,23],[31,32],[41,42],[51,52]], "jsarray");
}
function showCalendar(calendarID) {
document.getElementById(calendarID).style.display = 'block';
}
function selectCalendarDate(date) {
document.getElementById('calText').value = myCal.getFormatedDate(null, date);
document.getElementById('calObj').style.display = 'none';
return true;
}
function updateCalendar(input) {
// validate input here
return true;
}
</script>
</head>
<body onload="loadGrid();loadCalendar('calObj');">
<div id="gridbox" style="width:240px;height:170px"></div>
</body>
</html>Hello,
the problem is caused by positioning of the calendar container. The div that is inside a header cell has relative position. This div gets the same size as header cell. The container of calendar is inside this div. Therefore, it is limited by the size of parent container.
You need to place calendar container to the document body. For example:
[code]
And set calendar position by setPosition method:
var calendar = "<div style=\"background-color: #fff; border: #a4bed4 1px solid; height: 20px; width: 100px\">" +
"<input type=\"text\" onchange=\"updateCalendar(this);\" id=\"calText\" style=\"border-width:0px; height: 18px; width: 80px;\" />" +
"<img id='calendarImg' style=\"float: right; padding-right: 2px; cursor:pointer;\" onclick=\"showCalendar('calObj')\" src=\"/dhtmlxCalendar/codebase/imgs/calendar.gif\" alt=\"Show Calendar\" title=\"Show Calendar\" />" +
"</div>";
....
function showCalendar(calendarID) {
document.getElementById(calendarID).style.display = 'block';
myCal.setPosition(document.getElementById('calendarImg'))
}
<div id="divFilterCriteria" style="padding-left:1px">
<table style="-border:1px solid black">
<tr>
<td align="left" style="-border:1px solid black">
<div id="Date_Of_Birth" style="display:none;">
<table width="100%">
<tr><td>Date of Birth (mm/dd/yyyy):</td></tr>
<tr>
<td>
<input type="text" id="clientDob" readonly="readonly" />
<img id="clientDobImage" src="cal.gif" onClick="showDobCalendar();" />
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
initMyGrid();
</script>And
<script>
var calendarDob;
var grid;
function initMyGrid() {
/* Create and customize Layout */
layout = new dhtmlXLayoutObject("client_parentId", "2E", "skinName");
layout.cells("a").attachObject("divFilterCriteria");
layout.cells("a").hideHeader();
layout.cells("a").setHeight("70");
layout.cells("a").fixSize(true, true);
grid = layout.cells("b").attachGrid();
.............
toolbar = layout.cells("a").attachToolbar();
/* Grid Initialize and load data */
grid.init();
grid.loadXML("url");
calendarDob = new dhtmlxCalendarObject("clientDob", true,
{headerButtons:"TX", isWinHeader:true, headerText:"Date of Birth", isMonthEditable:true, isYearEditable:true, isWinDrag:true});
calendarDob.setDateFormat("%m/%d/%Y");
$("clientDob").onkeydown=null;
}
function showDobCalendar() {
calendarDob.show();
var xpos = 5;
var ypos = 0;
calendarDob.setPosition($("clientDobImage"),xpos, ypos);
};
</script>