controls going crazy in dialog with table hierarcy
I tried a variation of the "typical dialog box" example but to remove the degenerate absolute positioning styles and instead put into a table hierarchy. Suddenly the controls went crazy -- combo drop down is not responsive, and if I try to select a Input control it is not responsive. If I select another Input control the browser (IE) starts to loop between the to Inputs at a rapid speed. Any ideas?
<html>^M
<head>^M
<script src="../../runtime/lib/aw.js"></script>^M
<link href="../../runtime/styles/xp/aw.css" rel="stylesheet"></link>^M
<style>^M
.aw-system-control {position: relative}^M
^M
#box {left: 0px; top: 0px; width: 528px; height: 525px; border: 1px solid #999;
background: #ece9d8; position: absolute;}^M
#tabs {left: 2px; top: 2px; width: 526px; height: 22px;}^M
#frame {left: 6px; top: 28px; width: 526px; height: 452px; border: 1px solid #999;
background: #f9f8f4; position: absolute;}^M
^M
#detail_product_group {left: 12px; top: 2px; width: 467px; height: 160px;}^M
#fee_calc_group {left: 12px; top: 2px; width: 467px; height: 190px;}^M
#label_s {left: 1px; top: 2px; width: 50px; height: 16px;}^M
#s_combox {left: 20px; top: 20px; width: 125px; height: 22px;}^M
^M
#detail-group2 {left: 21px; top: 150px; width: 357px; height: 86px;}^M
^M
#label9 {left: 70px; top: 60px; width: 300px; height: 16px;}^M
#label_norevenue {left: 70px; top: 60px; width: 300px; height: 16px;}^M
^M
</style>^M
</head>^M
<body>^M
<script>^M
^M
var tabs = new AW.UI.Tabs;^M
tabs.setId("tabs");^M
tabs.setItemText(["Details", "Misc", "Revenue", "Team", "Group", "Comments"]);^M
tabs.setItemCount(6);^M
tabs.setSelectedItems([0]);^M
^M
var box = new AW.HTML.DIV;^M
box.setId("box");^M
box.setContent("tabs",tabs);
^M
var frame = new AW.HTML.DIV;^M
frame.setId("frame");^M
box.setContent("frame",frame);
^M
^M
var container = new AW.HTML.SPAN;^M
frame.setContent("container",container);
^M
var w_height = 23;
^M
var s_combo = new AW.UI.Combo;^M
s_combo.setSize(257,w_height);^M
s_combo.setControlText("Fees");^M
s_combo.setItemText(["a","b","c" ]);^M
s_combo.setItemCount(4);^M
s_combo.getContent('box/text').setAttribute('readonly', true); ^M
s_combo.onControlActivated = function(){ return true; } ^M
s_combo.onControlClicked = function() { this.showPopup(); }
^M
// meal size
var size_min = 10;
var size_max = 20;
var size_min_input = new AW.UI.Input;
var size_max_input = new AW.UI.Input;
var size_width = 60;
size_min_input.setSize( size_width, w_height );
size_min_input.setControlText( size_min );
size_max_input.setSize( size_width, w_height );
size_max_input.setControlText( size_max );
// Estimated fee
^M
^M
var detail_product_group = new AW.UI.Group;^M
detail_product_group.setId("detail_product_group");^M
detail_product_group.setControlText("General Information");^M
^M
var fee_calc_group = new AW.UI.Group;^M
fee_calc_group.setId("fee_calc_group");^M
fee_calc_group.setControlText("Meal Fee Information");^M
var fee_calc_table = new AW.HTML.TABLE;
var product_table = new AW.HTML.TABLE;
var s_row = new AW.HTML.TR;
var s_cell = new AW.HTML.TD;
var size_row = new AW.HTML.TR;
var size_cell = new AW.HTML.TD;
// fill group with content
var label_s = new AW.UI.Label;^M
label_s.setId("label_s");^M
label_s.setControlText("Sub-product:");^M
s_cell.setContent("s_combo", s_combo);^M
s_cell.setAttribute("valign", "top");^M
s_row.setContent("s_cell", s_cell );^M
product_table.setContent("s_row", s_row );^M
// Meal Size
var the_size = 23;
size_cell.setContent("size_min_input", size_min_input);
size_cell.setContent("size_max_input", size_max_input);
size_row.setContent("size_cell", size_cell);
fee_calc_table.setContent("size_row", size_row );^M
// Meal Decision section
var cal_widget_link = new AW.UI.Link;
cal_widget_link.setControlImage("home");
cal_widget_link.setControlLink("javascript:void(0)");
fee_calc_group.setContent("fee_calc_table", fee_calc_table );^M
detail_product_group.setContent("product_table", product_table );^M
^M
var label9 = new AW.UI.Label;^M
label9.setId("label9");^M
label9.setControlText("Other pages not yet implemented");^M
label9.setControlImage("favorites");^M
^M
var label_norevenue = new AW.UI.Label;^M
label_norevenue.setId("label_norevenue");^M
label_norevenue.setControlText("no revenue for this meal");^M
label_norevenue.setControlImage("favorites");^M
^M
// write out the control
document.write(box);^M
^M
var page_details = [detail_product_group, fee_calc_group ]; ^M
^M
var page_misc = [label9];^M
var page_revenue = [label_norevenue];^M
var page_team = [label9];^M
var page_group = [label9];^M
var page_comments = [label9];^M
^M
var pages = [page_details, page_misc, page_revenue, page_team, page_group, page_comment
s];^M
^M
container.element().innerHTML = page_details.join("");^M
^M
tabs.onCurrentItemChanged = function(i) {^M
^M
container.element().innerHTML = pages[i].join("");^M
}^M
s_combo.onCurrentItemChanged = function(text){ window.status = "control text:" + text;
s_combo.setControlText("aaa"); };
^M
</script>^M
</body>^M
</html>
<html>^M
<head>^M
<script src="../../runtime/lib/aw.js"></script>^M
<link href="../../runtime/styles/xp/aw.css" rel="stylesheet"></link>^M
<style>^M
.aw-system-control {position: relative}^M
^M
#box {left: 0px; top: 0px; width: 528px; height: 525px; border: 1px solid #999;
background: #ece9d8; position: absolute;}^M
#tabs {left: 2px; top: 2px; width: 526px; height: 22px;}^M
#frame {left: 6px; top: 28px; width: 526px; height: 452px; border: 1px solid #999;
background: #f9f8f4; position: absolute;}^M
^M
#detail_product_group {left: 12px; top: 2px; width: 467px; height: 160px;}^M
#fee_calc_group {left: 12px; top: 2px; width: 467px; height: 190px;}^M
#label_s {left: 1px; top: 2px; width: 50px; height: 16px;}^M
#s_combox {left: 20px; top: 20px; width: 125px; height: 22px;}^M
^M
#detail-group2 {left: 21px; top: 150px; width: 357px; height: 86px;}^M
^M
#label9 {left: 70px; top: 60px; width: 300px; height: 16px;}^M
#label_norevenue {left: 70px; top: 60px; width: 300px; height: 16px;}^M
^M
</style>^M
</head>^M
<body>^M
<script>^M
^M
var tabs = new AW.UI.Tabs;^M
tabs.setId("tabs");^M
tabs.setItemText(["Details", "Misc", "Revenue", "Team", "Group", "Comments"]);^M
tabs.setItemCount(6);^M
tabs.setSelectedItems([0]);^M
^M
var box = new AW.HTML.DIV;^M
box.setId("box");^M
box.setContent("tabs",tabs);
^M
var frame = new AW.HTML.DIV;^M
frame.setId("frame");^M
box.setContent("frame",frame);
^M
^M
var container = new AW.HTML.SPAN;^M
frame.setContent("container",container);
^M
var w_height = 23;
^M
var s_combo = new AW.UI.Combo;^M
s_combo.setSize(257,w_height);^M
s_combo.setControlText("Fees");^M
s_combo.setItemText(["a","b","c" ]);^M
s_combo.setItemCount(4);^M
s_combo.getContent('box/text').setAttribute('readonly', true); ^M
s_combo.onControlActivated = function(){ return true; } ^M
s_combo.onControlClicked = function() { this.showPopup(); }
^M
// meal size
var size_min = 10;
var size_max = 20;
var size_min_input = new AW.UI.Input;
var size_max_input = new AW.UI.Input;
var size_width = 60;
size_min_input.setSize( size_width, w_height );
size_min_input.setControlText( size_min );
size_max_input.setSize( size_width, w_height );
size_max_input.setControlText( size_max );
// Estimated fee
^M
^M
var detail_product_group = new AW.UI.Group;^M
detail_product_group.setId("detail_product_group");^M
detail_product_group.setControlText("General Information");^M
^M
var fee_calc_group = new AW.UI.Group;^M
fee_calc_group.setId("fee_calc_group");^M
fee_calc_group.setControlText("Meal Fee Information");^M
var fee_calc_table = new AW.HTML.TABLE;
var product_table = new AW.HTML.TABLE;
var s_row = new AW.HTML.TR;
var s_cell = new AW.HTML.TD;
var size_row = new AW.HTML.TR;
var size_cell = new AW.HTML.TD;
// fill group with content
var label_s = new AW.UI.Label;^M
label_s.setId("label_s");^M
label_s.setControlText("Sub-product:");^M
s_cell.setContent("s_combo", s_combo);^M
s_cell.setAttribute("valign", "top");^M
s_row.setContent("s_cell", s_cell );^M
product_table.setContent("s_row", s_row );^M
// Meal Size
var the_size = 23;
size_cell.setContent("size_min_input", size_min_input);
size_cell.setContent("size_max_input", size_max_input);
size_row.setContent("size_cell", size_cell);
fee_calc_table.setContent("size_row", size_row );^M
// Meal Decision section
var cal_widget_link = new AW.UI.Link;
cal_widget_link.setControlImage("home");
cal_widget_link.setControlLink("javascript:void(0)");
fee_calc_group.setContent("fee_calc_table", fee_calc_table );^M
detail_product_group.setContent("product_table", product_table );^M
^M
var label9 = new AW.UI.Label;^M
label9.setId("label9");^M
label9.setControlText("Other pages not yet implemented");^M
label9.setControlImage("favorites");^M
^M
var label_norevenue = new AW.UI.Label;^M
label_norevenue.setId("label_norevenue");^M
label_norevenue.setControlText("no revenue for this meal");^M
label_norevenue.setControlImage("favorites");^M
^M
// write out the control
document.write(box);^M
^M
var page_details = [detail_product_group, fee_calc_group ]; ^M
^M
var page_misc = [label9];^M
var page_revenue = [label_norevenue];^M
var page_team = [label9];^M
var page_group = [label9];^M
var page_comments = [label9];^M
^M
var pages = [page_details, page_misc, page_revenue, page_team, page_group, page_comment
s];^M
^M
container.element().innerHTML = page_details.join("");^M
^M
tabs.onCurrentItemChanged = function(i) {^M
^M
container.element().innerHTML = pages[i].join("");^M
}^M
s_combo.onCurrentItemChanged = function(text){ window.status = "control text:" + text;
s_combo.setControlText("aaa"); };
^M
</script>^M
</body>^M
</html>
james T
October 24,