[RESOLVED] position div relative to container div / absolute to table cell? [Archive]

PDA

Click to See Complete Forum and Search --> : [RESOLVED] position div relative to container div / absolute to table cell?

tjmcd

11-19-2007, 10:22 AM

Hey All,
The following code is intended to generate combo-text/dropdown box divs. The dropdowns (display:none) show (display:block/inline?) onFocus in the div's text input. Works great -- EXCEPT -- as these then need to be repeated (variations) hundreds of times in an industry standard report form where it appears that use of TABLES (ooohh) is the only reasonable approach to layout (see pdf example attached) the code falls short, in that onFocus, (un-hiding the dropdown) GROWS the TABLE CELL (and row) hight to accommodate the revealed dropdown.

Previous incarnations worked marginally better wherein the dropdown divs were all position absolutely in reference to the page, but this approach was cumbersome at best. How might I arrange so that the dropdown divs ($selDiv) are positioned relative to their corresponding text fields - and yet positioned absolutely relative to the containing table cell? (dropdown positions OVER "adjacent" table cells below?) without altering cell/row height?
Hope this makes sense?<script>
// quick browser tests
var ie5 = (document.all && document.getElementById) ? true : false;
function show(sw,obj) {
// show/hide divs
if (sw && ie5) document.all[obj].style.display = 'block';
if (!sw && ie5) document.all[obj].style.display = 'none';
}
function popTextField(fieldName,fieldValue){
document.getElementById(fieldName).value=fieldValue;
}
</script>
<style>

</style>
<body>
<?php
$pgCode='a';//(alphaKey)
function make_comboBoxDiv($cbxType,$num){
global $pgCode;
if($cbxType=='1'){
$textName="comments_".$num;
$selDiv="comDiv".$num;
$selName="comSel_".$num;
}
else if($cbxType=='2'){
$textName="drop_".$pgCode.$num;
$selDiv="dropDiv_".$pgCode.$num;
$selName="dropSel_".$pgCode.$num;
}
$div="<div>
<input type='text' name='$textName' id='$textName'
onFocus=\"show(true,'$selDiv');\"
onblur=\"ff='$selDiv'; sTo=setTimeout('show(false,ff)',5);//allow switch focus to <select> below\">
<div id='$selDiv' class='myLayersClass'>
<select name='$selName' id='$selName'
onFocus='clearTimeout(sTo);'
onBlur='show(false,'$selDiv');'
onchange=\"popTextField('$textName',this.value);show(false,'$selDiv');\" >
<option>Select Option</option>
<option value='Red'>Red</option>
<option value='Green'>Green</option>
<option value='Blue'>Blue</option>
</select>
</div>
</div>";
echo"$div";
}
?>
<table>
<tr>
<td ><?php make_comboBoxDiv(2,1);?></td>
<td ></td>
<td ></td>
<td ></td>
</tr>
<tr>
<td ></td>
<td ></td>
<td ><?php make_comboBoxDiv(1,2);?></td>
<td ></td>
</tr>
</table>
</body>

jasonahoule

11-19-2007, 10:37 AM

Did you try setting the z-index to be greater than that of your table?

tjmcd

11-19-2007, 10:54 AM

Thanks jasonahoule,
I'm hopeful (based on your response) that I'm making some kind of sense?
I altered the select in the php script to:
<select name='$selName' id='$selName'
style='z-index: 99;'
onFocus='clearTimeout(sTo);'
onBlur='show(false,'$selDiv');'
onchange=\"popTextField('$textName',this.value);show(false,'$selDiv');\" >
<option>Select Option</option>
<option value='Red'>Red</option>
<option value='Green'>Green</option>
<option value='Blue'>Blue</option>
</select>And set both table and td to<table style="z-index: 1;">
<td style="z-index:1;"><?php make_comboBoxDiv(2,1);?></td> but to no effect:(

jasonahoule

11-19-2007, 11:18 AM

I am really confused as to what you are trying to accomplish. You have your select boxes being written to a div that is not being displayed.

tjmcd

11-19-2007, 11:38 AM

I think it would become crystal clear were you to load it up and try it.
Short of that, I will try to explain.
In the context of the industry standard form, the goal is to offer our member users (Home Inspectors) a dropdown for each text field containing appropriate item specific boilerplate text, with the option of alternately typing in their own response. Hence, we have created Text/Dropdown combo boxes. Select from Options, or Type your own response.

In my example script, you Have the option of selecting Red, Green, or Blue from the dropdown (hidden div shows on textfeild focus) OR you may type "Purple" or "Periwinkle" or whatever you like in the textfield instead.

p.s. small error about line 56
Should be: onBlur='show(false,\"$selDiv\");' Instead of: onBlur='show(false,'$selDiv');'

tjmcd

11-19-2007, 01:53 PM

Aha!
So simple. :p
<table style='table-layout: fixed;' >
<tr height="25">
<td ><?php make_comboBoxDiv(2,1);?></td>
<td ></td>
<td ></td>
<td ></td>
</tr>
<tr height="25">
<td ><?php make_comboBoxDiv(1,2);?></td>
<td ></td>
<td ></td>
<td ></td>
</tr>
</table>