Get width with JavaScript - Essential Objects, Inc. Support Forum

Welcome Guest

Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » Get width with JavaScript

Get width with JavaScript

Options

Previous Topic · Next Topic

Guenter

Posted: Thursday, June 11, 2015 9:44:32 AM

Rank: Member
Groups: Member

Joined: 6/11/2015
Posts: 10

Hi,

I want to dynamically resize rows and columns with JavaScript in EO.PDF 6.0.36.2, but the JavaScript engine returns far to small values for every width property.

Code:

Copy

<!DOCTYPE html>
<html>
  <head>
      <style type="text/css">
          table.parent       { table-layout: fixed; width: 100%; border-collapse: collapse; border-spacing: 0; border-color: blue; border-style: solid; border-width: 1px; }
      </style>
  </head>
  <body>
      <table id="tableparent" class="parent">
          <tr id="tablerow">
              <td id="tablecolumn">
                   
              </td>
          </tr>
<script>
  var tableparent = document.getElementById('tableparent');
  var tablerow = document.getElementById('tablerow');
  var tablecolumn = document.getElementById('tablecolumn');

  console.log("PARENT offsetwidth: " + tableparent.offsetWidth + " width: " + tableparent.width + " clientwidth: " + tableparent.clientwidth + " scrollwidth: " + tableparent.scrollWidth);
  console.log("ROW offsetwidth: " + tablerow.offsetWidth + " width: " + tablerow.width + " clientwidth: " + tablerow.clientwidth + " scrollwidth: " + tablerow.scrollWidth);
  console.log("COLUMN offsetwidth: " + tablecolumn.offsetWidth + " width: " + tablecolumn.width + " clientwidth: " + tablecolumn.clientwidth + " scrollwidth: " + tablecolumn.scrollWidth);
</script>
      </table>
  </body>
</html>

Height is working, but width only returns correct values if the width is set to absolute values (e.g "width: 100px;") not in percentage ("width: 100%;") as in my example. Every tested browser (IE, Chrome, Firefox) returns correct values for my example, but not EO.

EO (6.0.36.2) Log for the above html:

Code:

Copy

PARENT offsetwidth: 1 width: clientwidth: undefined scrollwidth: 6
ROW offsetwidth: 0 width: undefined clientwidth: undefined scrollwidth: 0
COLUMN offsetwidth: 0 width: clientwidth: undefined scrollwidth: 5

Chrome (43.0.2357.124) Log for the above html:

Code:

Copy

PARENT offsetwidth: 1533 width: clientwidth: undefined scrollwidth: 1532
ROW offsetwidth: 1532 width: undefined clientwidth: undefined scrollwidth: 1532
COLUMN offsetwidth: 1532 width: clientwidth: undefined scrollwidth: 1531

Do I have to calculate the width by myself because relative values are not supported or is this a bug in the current Version?

Thanks
Guenter

eo_support

Posted: Thursday, June 11, 2015 4:11:45 PM

Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,229

Hi,

Please try to add a slight delay to the script code. You would do something like this:

Code: JavaScript

Copy

setTimeout(function()
{
     ....your original code here....
}, 300);

The reason is the layout engine works asynchronously. So it's possible that the stylesheet has not been fully applied when your script is run. Thus adding a small time delay would allow your script to get the correct value.

Thanks!

Guenter

Posted: Friday, June 12, 2015 4:31:12 AM

Rank: Member
Groups: Member

Joined: 6/11/2015
Posts: 10

Thanks for your help

We use EO.PDF in a productive solution and it's probably very hard to find a time out value, that works with all customers. E.g. if I extend the given sample with a small canvas and use 300 as a time out value, nothing is drawn on the canvas, but 200 does work

e.g

Code:

Copy

<!DOCTYPE html>
<html>
  <head>
      <style type="text/css">
          table.parent       { table-layout: fixed; width: 100%; border-collapse: collapse; border-spacing: 0; border-color: blue; border-style: solid; border-width: 1px; }
      </style>
  </head>
  <body>
      <table id="tableparent" class="parent">
          <tr id="tablerow">
              <td id="tablecolumn">
                  <canvas id="stroke"></canvas>
              </td>
          </tr>
<script>
  setTimeout(function()
  {

      var tableparent = document.getElementById('tableparent');
      var tablerow = document.getElementById('tablerow');
      var tablecolumn = document.getElementById('tablecolumn');
      var stroke = document.getElementById('stroke');

      var context = stroke.getContext('2d');
      context.beginPath();
context.lineWidth = 1;
      context.moveTo(0, stroke.height);
      context.lineTo(tablecolumn.scrollWidth, 0);
context.stroke();
      context.closePath();
  }, 300);


</script>
      </table>
  </body>
</html>

Does EO have a JavaScript API, that gives access to the event when everything is rendered? The usual suspects document.onload and window.onload don't work

Thanks

You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

Message