Customizing WebViewer to have differently styled checkboxes

[Matt Parizeau]

Q:

Is it possible to style the WebViewer checkboxes so that they have an "X" style instead of a checkmark?

A:

We used the strategy from the examples on this page (http://www.csscheckbox.com/) to modify the checkboxes in WebViewer to have an X style. Here's the example code:

var style = document.createElement('style')
style.type = 'text/css'
style.innerHTML = `
input[type=checkbox].css-checkbox {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height:1px;
    width:1px;
    margin:-1px;
    padding:0;
    border:0;
}


input[type=checkbox].css-checkbox + label.css-label {
  display:inline-block;
  background-repeat:no-repeat;
  background-position: 0 0;
  vertical-align:middle;
  cursor:pointer;
}


input[type=checkbox].css-checkbox:checked + label.css-label {
  background-position: 0 100%;
}


.lite-x-gray{background-image:url(http://csscheckbox.com/checkboxes/lite-x-gray.png);}
`;
document.getElementsByTagName('head')[0].appendChild(style);


$(document).on('viewerLoaded', function() {
  readerControl.docViewer.on('pageComplete', function(e, pageIndex) {
    $('#pageContainer' + pageIndex + ' input[type="checkbox"]').each(function() {
      var $this = $(this);
      $this.addClass('css-checkbox');
      var width = $this.width();
      var height = $this.height();
      var id = this.parentNode.id + Math.random();
      this.id = id;


      var label = $('<label for="' + id + '" name="' + id + '_lbl" class="css-label lite-x-gray"></label>');
      label.css({
        width: width,
        height: height,
        'background-size': width + 'px ' + (height * 2) + 'px'
      });
      $this.parent().append(label);
    });
  });
});

[Andy Huang]

To update this solution for the current set of APIs, you can change createInnerElement on the widget instead. You can read a bit more here: https://www.pdftron.com/documentation/web/guides/form-field-styling/.
```

    const createInnerElement = Annotations.CheckButtonWidgetAnnotation.prototype.createInnerElement;

    Annotations.CheckButtonWidgetAnnotation.prototype.createInnerElement = function() {

      if (this['captions']['Normal']) {

        switch(this['captions']['Normal']) {

          case '8':

            const container = document.createElement('div');

            container.width = container.height = 12;

            container.style.backgroundColor = '#00a5e4';

            container.style.padding = 0;

            container.addEventListener('click', () => {

              this.trigger('click');

              if (this.value === 'On') {

                container.innerHTML = `<?xml version="1.0" encoding="UTF-8" standalone="no" ?>

                <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 50 50" xml:space="preserve">

                <g transform="matrix(0.28 0 0 0.28 25 25)" id="db828402-3b59-4362-a9ca-f33ad34ee51a"  >

                <path style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(101,101,101); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-50, -50)" d="M 16.28 19.945 L 19.957 16.32 C 22.060000000000002 14.166 25.578000000000003 14.166 27.681 16.32 L 50.007000000000005 38.595 L 72.333 16.32 C 74.43599999999999 14.166 77.954 14.166 80.054 16.32 L 83.68 19.945 C 85.834 22.046 85.834 25.566000000000003 83.68 27.668 L 61.405 49.993 L 83.68 72.32 C 85.834 74.422 85.834 77.939 83.68 80.04299999999999 L 80.054 83.72099999999999 C 77.95400000000001 85.82 74.436 85.82 72.333 83.72099999999999 L 50.007 61.393 L 27.681 83.721 C 25.578 85.82000000000001 22.060000000000002 85.82000000000001 19.957 83.721 L 16.28 80.043 C 14.180000000000001 77.93900000000001 14.180000000000001 74.42200000000001 16.28 72.32000000000001 L 38.606 49.99300000000001 L 16.28 27.667 C 14.18 25.566 14.18 22.046 16.28 19.945 z" stroke-linecap="round" />

                </g>

                </svg>`;

              } else {

                container.innerHTML = '';

              }

            });

            return container;

          default:

            const el = createInnerElement.apply(this, arguments);

            return el;

        }

      } else {

        const el = createInnerElement.apply(this, arguments);

        return el;

      }

    };

```