"Evertjan." <exjxw.hannivoort@interxnl.net> wrote:
[color=blue]
>Ed Jay wrote on 12 nov 2005 in comp.lang.javascript
:
>[color=green]
>> 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>
>>[/color]
>
>do not use float here, change it, temporarily adding a border, to:
><div NOstyle="float:left;" style="border:6px solid green;">[/color]
Doing this caused an extra line to appear below the 'Patient is
symptomatic' line, even when the form box wasn't checked. It also extended
it's container to the right margin. Checking the box displayed 'div1'
immediately below, without adding another blank line.[color=blue]
>
>and move the end </div> to the group if </div>'s further down.
>Then see what happens.[/color]
The only additional change was the inclusion of 'div1' as a subset of the
'Patient is symptomatic' container.[color=blue]
>
>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[/color]
No change.[color=blue]
>
>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.
>[/color]
Understood. Thanks for the tip.
Got it working...sort of.
When I removed the float I noted that the primary container extended to
the right margin. It occurred to me that what was possibly happening was
that the hidden text container width plus the primary container width was
causing line wrapping. So, I limited the widths of the two and apparently,
I was correct. Toggling 'div1' stopped adding an extra blank line.
However, with the float gone, I was still introducing a blank line, but
it's static. Regardless of whether I used a block or inline style for
'div1'. If I add back the float and limit the width of the sum of the two
containers, it seems to work, whether I use inline or block; however, only
if the float is present.
Changing the above introduces a couple of new issues:
When I select 'Burning, Pain or Numbness,' 'div2' appears as it should,
below 'div1,' but it now introduces an extra blank line below it, even
though I've guaranteed no wrapping by limiting its width.
Further, when one of the choices (left/right/both) is selected in 'div2',
'div3' is displayed but with an extra added line above the text.
I tried adding margin:0px and padding:0px to both 'div2' and 'div3' but to
no avail.
Also, if I don't limit the width of 'div2', I experience the same behavior
as with 'div3.'[color=blue]
>===========================================
>
>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')">[/color]
Thanks. Done.
--
Ed Jay (remove M to respond by email)
