Hello,
A web dialog window was opened using window.showModalDialog(). Upon opening, DatePicker was clicked and the calendar opened up to the left of the window and the other widgets were shifted to the right. This phenomena does not happen if window.open() was used.
Your input will be appreciated.
Please see below for the calling JS and the rendered JSP.
function preCofirmationPopup()
{
var parameters = getLocation()
+ "preConfirmationAction.do?actionType=initialize"
+ "&confReq=" + document.getElementById("confRequestor").value
+ "&gasDate=" + dojo.widget.byId("gasDay").inputNode.value
+ "&cycle=" + cyclesCombo.getSelectedValue();
var returnVal = window.showModalDialog(parameters, '', 'dialogHeight:500px;dialogWidth:450px;center:yes;resizable:no;scroll:no');
//var preConfWindow = window.open(parameters,'PreConfirmation','scrollbars=no,resizable=yes,width=400,height=450,left=300,top=100');
// if (window.focus) {preConfWindow.focus()}
}
<%@ page language="java" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html"%>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic"%>
<%@ taglib uri="/WEB-INF/rc-common.tld" prefix="common"%>
<%@ taglib uri="/WEB-INF/rc-grid.tld" prefix="grid"%>
<%@ taglib uri="/WEB-INF/ajaxtags.tld" prefix="ajax"%>
<head>
<title>Pre-Confirmation Maintenance</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="pipeline/styles/style.css" type="text/css">
<link rel="stylesheet" href="dhtmlx/dhtmlXcombo/css/dhtmlXCombo.css" type="text/css">
<script>
window.dhx_globalImgPath="dhtmlx/dhtmlXcombo/imgs/";
</script>
<!--Dojo -->
<script>
var djConfig = {
isDebug: false,
debugAtAllCosts: false
};
</script>
<script type="text/javascript" src="dojoAjax/dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.event.*");
dojo.require("dojo.widget.*");
dojo.require("dojo.widget.Button");
dojo.require("dojo.widget.DropdownDatePicker");
dojo.require("dojo.widget.Dialog");
var dlg;
function init(e) {
dlg = dojo.widget.byId("DialogContent");
var modalDiv = document.getElementById("ajaxActivityMessage");
dlg.setCloseControl(modalDiv);
}
dojo.addOnLoad(init);
</script>
<!-- For DHTMLX Dropdown Combobox to work, include dhtmlXCommon.js -->
<script src="dhtmlx/dhtmlxgrid/js/dhtmlXCommon.js"></script>
<script type="text/javascript" src="dhtmlx/dhtmlXcombo/js/dhtmlXCombo.js"></script>
<!-- Other JS functions like getLocation() -->
<script src="pipeline/scripts/common.js"></script>
<script src="tms/scripts/conf_preConfirmation.js"></script>
</head>
<body onload="doOnLoad()">
<%
String gasDateString = (String) session.getAttribute("gasDate");
Integer cycle = (Integer) session.getAttribute("cycle");
String confReq = (String) session.getAttribute("confReq");
session.removeAttribute("gasDate");
session.removeAttribute("cycle");
session.removeAttribute("confReq");
%>
<form action="//preConfirmationAction.do" name="topForm">
<input type="hidden" id="cycle" name="cycle" value="<%= cycle %>" />
<input type="hidden" id="endDateString" name="endDateString" value="" />
<input type="hidden" id="etsContractNumber" name="etsContractNumber" value="" />
<input type="hidden" id="nonEtsContractNumber" name="nonEtsContractNumber" value="" />
<input type="hidden" id="thirdPartyEtsContractNumber" name="thirdPartyEtsContractNumber" value="" />
<input type="hidden" id="thirdPartyNonEtsContractNumber" name="thirdPartyNonEtsContractNumber" value="" />
<div class="contentResults" id="top" style="border:0px solid black;">
<table border = 0 cellspacing = 3 cellpadding = 2>
<tr>
<td align= "left" colspan=1><label for="confRequestor" > Conf Req:</label></td>
<td align= "left" colspan=3><input id="confRequestor" name="confRequestor" type="text" size=35 value="<%= confReq %>" readonly ></td >
</tr>
<tr>
<td><label for="gasDate" > Gas Date:</label></td>
<td><input id="gasDate" name="gasDate" type="text" value="<%= gasDateString %>" size=15 readonly></td >
<td align= "right" ><label for="combo_cycle"> Cycle:</label></td>
<td align= "left" ><div id="combo_cycle" ></div></td>
</tr>
<tr>
<td align= "left"><label for="loc" > Loc:</label></td>
<td ><input type="text" id="loc" name ="loc" size = 15 value=" Enter Point #" onfocus="resetLocRelatedInfo()" onblur="populateLocRelatedInfo()"></td>
<td colspan=2><input type = "text" id="locName" name ="locName" size = 35 readonly> </td>
</tr>
<tr>
<td align= "left"><label for="OBA" >OBA K:</label></td>
<td align= "left" colspan=3><input type = "text" id="OBA" name ="OBA" size = 15 readonly> </td>
</tr>
<tr>
<td colspan=6><hr width="100%" size="3"> </hr></td>
</tr>
<tr>
<td align= "right" colspan=2><label for="DUNS" > ID:</label></td>
<td align= "left" colspan=2><input type="text" id="DUNS" name="DUNS" size=25 value=" Enter Nominator DUNS" onfocus="setBlankValue()"> </td>
</tr>
<tr>
<td align= "right" colspan=2><label for="svcReq" >Svc Req K:</label></td>
<td align= "left" colspan=2><input type ="text" id="svcReq" name="svcReq" size=25 value=" Enter Shipper Contract " onfocus="resetShipperRelatedInfo()" onblur="populateShipperRelatedInfo()"> </td>
</tr>
<tr>
<td align= "center" colspan=4>
<fieldset style="width:270px; height:40px;">
<legend align="left">
<input type=radio id="role" name="role" value="R" checked >Receipt
<input type=radio id="role" name="role" value= "D">Delivery
</legend>
<table border = 0 cellspacing = 0 cellpadding = 2>
<tr>
<td> </td> <td> </td> <td> </td>
<td align= "right" colspan=2><label for="thirdPContract">Up / Down K:</label></td>
<td align= "right" colspan=2><input type="text" id="thirdPContract" name ="thirdPContract" size=25 value=" Enter Third Party Contract" onfocus="resetThirdPartyRelatedInfo()" onblur="populateThirdPRelatedInfo()"></td>
</tr>
</table>
</fieldset>
</td>
</tr>
<tr height="30" valign=bottom>
<td align= "right" colspan=2><label for="thirdPCommonCode" > ID Code:</label></td>
<td align= "left" colspan=2><input type="text" id="thirdPCommonCode" name="thirdPCommonCode" size=25 value=" Third Party Common Code Display" onfocus="setBlankValue()"> </td>
</tr>
<tr>
<td align= "right" colspan=2><label for="confVol" >Confirmed Quantity:</label></td>
<td align= "left" colspan=2><input type="text" id="confVol" name ="confVol" size=25 value=" Enter Volume" onfocus="setBlankValue()"> </td>
</tr>
<tr>
<td align= "right" colspan=2><label for="begDate" >Beg Date:</label></td>
<td align= "left" colspan=2><input type="text" id="begDate" name ="begDate" size=25 value="<%= gasDateString %>" readonly> </td>
</tr>
<tr>
<td align= "right"colspan=2 ><label for="endDate" >End Date:</label></td>
<td align= "left" colspan=2> <input id="endDate" name="endDate" dojoType="DropdownDatePicker" value="<%= gasDateString %>"></td>
</tr>
<tr>
<td align= "right" colspan=4>
<input type=submit id="ok-button" name="ok-button" value="OK" onClick="saveConfirmation()" style="height:1.5em; width:5em">
</td>
</tr>
<tr>
<td align= "right" colspan=4>
<input type=button id="cancel-button" name="cancel-button" value="Cancel" onClick="closeMyself()" style="height:1.5em; width:5em">
</td>
</tr>
</table>
</div>
</form>
<!-- SECTION:: MESSAGE AREAS -->
<div class="contentResults">
<div id="grid_ConfMaint" style="background-color:whitesmoke;width:960px; height:285px; border:1px solid;border-color: lightgrey;padding:1px;"></div>
</div>
<div class="error" id="messagePane" style="text-align:center;"></div>
<div dojoType="dialog" id="DialogContent" bgColor="white" bgOpacity="0.3" toggle="fade" toggleDuration="0" style="display: none">
<div id="ajaxMessageText" style="background-color:#ffcaca;"><br><img src="pipeline/images/indicator.gif" alt=""><b> Saving data.......</b></div>
<div id="ajaxActivityMessage" style="display: none"></div>
</div>
</body>
<title>Pre-Confirmation Maintenance</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="pipeline/styles/style.css" type="text/css">
<link rel="stylesheet" href="dhtmlx/dhtmlXcombo/css/dhtmlXCombo.css" type="text/css">
<script>
window.dhx_globalImgPath="dhtmlx/dhtmlXcombo/imgs/";
</script>
<!--Dojo -->
<script>
var djConfig = {
isDebug: false,
debugAtAllCosts: false
};
</script>
<script type="text/javascript" src="dojoAjax/dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.event.*");
dojo.require("dojo.widget.*");
dojo.require("dojo.widget.Button");
dojo.require("dojo.widget.DropdownDatePicker");
dojo.require("dojo.widget.Dialog");
var dlg;
function init(e) {
dlg = dojo.widget.byId("DialogContent");
var modalDiv = document.getElementById("ajaxActivityMessage");
dlg.setCloseControl(modalDiv);
}
dojo.addOnLoad(init);
</script>
<!-- For DHTMLX Dropdown Combobox to work, include dhtmlXCommon.js -->
<script src="dhtmlx/dhtmlxgrid/js/dhtmlXCommon.js"></script>
<script type="text/javascript" src="dhtmlx/dhtmlXcombo/js/dhtmlXCombo.js"></script>
<!-- Other JS functions like getLocation() -->
<script src="pipeline/scripts/common.js"></script>
<script src="tms/scripts/conf_preConfirmation.js"></script>
</head>
<body onload="doOnLoad()">
<%
String gasDateString = (String) session.getAttribute("gasDate");
Integer cycle = (Integer) session.getAttribute("cycle");
String confReq = (String) session.getAttribute("confReq");
session.removeAttribute("gasDate");
session.removeAttribute("cycle");
session.removeAttribute("confReq");
%>
<form action="//preConfirmationAction.do" name="topForm">
<input type="hidden" id="cycle" name="cycle" value="<%= cycle %>" />
<input type="hidden" id="endDateString" name="endDateString" value="" />
<input type="hidden" id="etsContractNumber" name="etsContractNumber" value="" />
<input type="hidden" id="nonEtsContractNumber" name="nonEtsContractNumber" value="" />
<input type="hidden" id="thirdPartyEtsContractNumber" name="thirdPartyEtsContractNumber" value="" />
<input type="hidden" id="thirdPartyNonEtsContractNumber" name="thirdPartyNonEtsContractNumber" value="" />
<div class="contentResults" id="top" style="border:0px solid black;">
<table border = 0 cellspacing = 3 cellpadding = 2>
<tr>
<td align= "left" colspan=1><label for="confRequestor" > Conf Req:</label></td>
<td align= "left" colspan=3><input id="confRequestor" name="confRequestor" type="text" size=35 value="<%= confReq %>" readonly ></td >
</tr>
<tr>
<td><label for="gasDate" > Gas Date:</label></td>
<td><input id="gasDate" name="gasDate" type="text" value="<%= gasDateString %>" size=15 readonly></td >
<td align= "right" ><label for="combo_cycle"> Cycle:</label></td>
<td align= "left" ><div id="combo_cycle" ></div></td>
</tr>
<tr>
<td align= "left"><label for="loc" > Loc:</label></td>
<td ><input type="text" id="loc" name ="loc" size = 15 value=" Enter Point #" onfocus="resetLocRelatedInfo()" onblur="populateLocRelatedInfo()"></td>
<td colspan=2><input type = "text" id="locName" name ="locName" size = 35 readonly> </td>
</tr>
<tr>
<td align= "left"><label for="OBA" >OBA K:</label></td>
<td align= "left" colspan=3><input type = "text" id="OBA" name ="OBA" size = 15 readonly> </td>
</tr>
<tr>
<td colspan=6><hr width="100%" size="3"> </hr></td>
</tr>
<tr>
<td align= "right" colspan=2><label for="DUNS" > ID:</label></td>
<td align= "left" colspan=2><input type="text" id="DUNS" name="DUNS" size=25 value=" Enter Nominator DUNS" onfocus="setBlankValue()"> </td>
</tr>
<tr>
<td align= "right" colspan=2><label for="svcReq" >Svc Req K:</label></td>
<td align= "left" colspan=2><input type ="text" id="svcReq" name="svcReq" size=25 value=" Enter Shipper Contract " onfocus="resetShipperRelatedInfo()" onblur="populateShipperRelatedInfo()"> </td>
</tr>
<tr>
<td align= "center" colspan=4>
<fieldset style="width:270px; height:40px;">
<legend align="left">
<input type=radio id="role" name="role" value="R" checked >Receipt
<input type=radio id="role" name="role" value= "D">Delivery
</legend>
<table border = 0 cellspacing = 0 cellpadding = 2>
<tr>
<td> </td> <td> </td> <td> </td>
<td align= "right" colspan=2><label for="thirdPContract">Up / Down K:</label></td>
<td align= "right" colspan=2><input type="text" id="thirdPContract" name ="thirdPContract" size=25 value=" Enter Third Party Contract" onfocus="resetThirdPartyRelatedInfo()" onblur="populateThirdPRelatedInfo()"></td>
</tr>
</table>
</fieldset>
</td>
</tr>
<tr height="30" valign=bottom>
<td align= "right" colspan=2><label for="thirdPCommonCode" > ID Code:</label></td>
<td align= "left" colspan=2><input type="text" id="thirdPCommonCode" name="thirdPCommonCode" size=25 value=" Third Party Common Code Display" onfocus="setBlankValue()"> </td>
</tr>
<tr>
<td align= "right" colspan=2><label for="confVol" >Confirmed Quantity:</label></td>
<td align= "left" colspan=2><input type="text" id="confVol" name ="confVol" size=25 value=" Enter Volume" onfocus="setBlankValue()"> </td>
</tr>
<tr>
<td align= "right" colspan=2><label for="begDate" >Beg Date:</label></td>
<td align= "left" colspan=2><input type="text" id="begDate" name ="begDate" size=25 value="<%= gasDateString %>" readonly> </td>
</tr>
<tr>
<td align= "right"colspan=2 ><label for="endDate" >End Date:</label></td>
<td align= "left" colspan=2> <input id="endDate" name="endDate" dojoType="DropdownDatePicker" value="<%= gasDateString %>"></td>
</tr>
<tr>
<td align= "right" colspan=4>
<input type=submit id="ok-button" name="ok-button" value="OK" onClick="saveConfirmation()" style="height:1.5em; width:5em">
</td>
</tr>
<tr>
<td align= "right" colspan=4>
<input type=button id="cancel-button" name="cancel-button" value="Cancel" onClick="closeMyself()" style="height:1.5em; width:5em">
</td>
</tr>
</table>
</div>
</form>
<!-- SECTION:: MESSAGE AREAS -->
<div class="contentResults">
<div id="grid_ConfMaint" style="background-color:whitesmoke;width:960px; height:285px; border:1px solid;border-color: lightgrey;padding:1px;"></div>
</div>
<div class="error" id="messagePane" style="text-align:center;"></div>
<div dojoType="dialog" id="DialogContent" bgColor="white" bgOpacity="0.3" toggle="fade" toggleDuration="0" style="display: none">
<div id="ajaxMessageText" style="background-color:#ffcaca;"><br><img src="pipeline/images/indicator.gif" alt=""><b> Saving data.......</b></div>
<div id="ajaxActivityMessage" style="display: none"></div>
</div>
</body>