How do I get annotations to show in their full width

[robinf_chadwick]

I am building a form with annotations on it to organize the fields on a form.

In order to prevent users from hiding the annotations permanently, I need an on load client script that turns annotations on when the form is loaded

This is how I need the annotations to appear

I have written a client script as follows:

function onLoad() {

  //Find all annotations and make sure they are shown

  $$('.annotation-row').each(function(elmt) {

  elmt.setStyle({

  display: 'block'

  });

  });

}

When the script is active, it truncates the annotations as follows:

Any advice?

[Shane J]

Edit your form layout and move the annotations outside of any 'splits' you are using.

[robinf_chadwick]

Thanks for replying.   The Contact Details annotation is already outside any splits in a single column block.  

I'm thinking the part of the script that sets the style to block is truncating the annotation to be only as long as the text.   I don't know what to use to set the style.

[robinf_chadwick · Accepted solution]

The answer is to modify the script so the display: 'block" says display: 'table-row'

function onLoad() {

  //Find all annotations and make sure they are shown

  $$('.annotation-row').each(function(elmt) {

  elmt.setStyle({

  display: 'table-row'

  });

  });

}