COTG "Image + Annotation" issue

1

COTG from with 4 “fields Table” each containing one “image + annotation” so end user can add as many of each page as they want. Everything works fine, then the user wants to hide groups of pages he’s not working on. I wrap each “Fields Table” in a div that is hidden and add a button to show them.

 < Button >
 < Div style="display:block" >
   < Fields Table >
     < image + annotation >
   </ Fields Table >
</ Div >

image

if you click on the “Graph Paper” button it will show the sheet(s) of graph paper click again they’re hidden. Great. If you start out with the page(s) hidden and you click on the button to show the first page it will not let you draw on it. If you add a second page you can draw on it but you lose the drawing when you leave the form and come back.

If I change it so the intial page is shown when you open the document

image
image1030×416 23 KB

You can draw on it and subsequent pages and not lose your work. Tried using inline style and changing the Div class when you click on the button.

If you set the Div to not show at first you cannot edit the first page, if you set it to show then you can annotate the first page. Hopefully that makes sense, any ideas?

Jerry

2

I’ll answer my own question incase someone else try’s this.

I changed the DIV element to
< div id=“FormDiv” class=“hideDontTakeUpSpace” style=“overflow : hidden” >

Then used the following CSS
.hideDontTakeUpSpace
{
height: 0;
overflow = hidden;
}

.DontHide
{
height: auto;
}

The button called a JavaScript function to Toggle the class. Now the form is hidden and when I click on it, I can annotate the first image as expected.