Ed Jay wrote on 12 nov 2005 in comp.lang.javascript
:
Well, nobody in alt.html wants to answer this question, so I'll ask it
here:
I have a button and associated text in a container. When one clicks
the button it brings up additional buttons and text in a container to
the right of the first container. I get more than I bargained for...it
also brings up unwanted space below the dual container line. I can't
figure out why, so I can't fix it.
If you go to <http://www.edbj.aes-intl.com/brcaform1.html> and click
on 'Patient is symptomatic of breast disease:' you'll observe the
errant behavior.
Basically, the markup and code is:
<Form....>
<div style="float:right">
Patient is symptomatic of breast disease :
<checkbox... onClick="show additional text">
<div id='div1' onClick="show more text below>
</div></div>
</Form>
<br clear=all><br>Show the next text block independent of the above>
do not use float here, change it, temporarily adding a border, to:
<div NOstyle="float:left;" style="border:6px solid green;">
and move the end </div> to the group if </div>'s further down.
Then see what happens.
You could change the toggling of:
<div id="div1" style="display:none;border:1px solid black;">
from
target.style.display = "";
meaning target.style.display = "block";
to
target.style.display = "inline";
and see what happens
Adding inlines on the right is better than floating the original on the
left, IMHO. Floating is for images in a text, not for this.
===========================================
A better way, detecting the checkbox state, is:
function toggle(what,targetId) {
target = document.getElementById(targetId);
target.style.display=(what.checked)?'inline':'none ';
}
and
<input type=checkbox onClick="toggle(this,'div1')">
--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)