1


OK, there seem to be lots of questions+answers related to this topic, but I cannot find a precise answer, mainly because the they seem to be related to setting a cell width. I'm not interested in that. Apologies if I've missed it!

I want to draw a canvas in a cell, which has not had it's width set.

I have a TableCellElement CELL and I can display innerHTML fine. But I want to add a child canvas to CELL, so I need the cell width.

CELL.style.width, CELL.clientWidth, CELL.client, etc all return zero, always.

Is this possibly a Dart bug, am I going about it incorrectly, or is it not possible? Should I find the column the cell is in (how?), and then find the width of that?
Cheers
Steve

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
Lymp
  • 933
  • 1
  • 7
  • 20

2 Answers2

2

index.html

<!DOCTYPE html>

<html>
  <head>
    <style>
      table,td {
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td id="id1">xxx</td><td id="id2">yyyy</td><td id="id3"></td>
      </tr>
    </table>

    <script type="application/dart" src="index.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

index.dart

import 'dart:html';

void main() {
  printWidth('id1');
  printWidth('id2');
  printWidth('id3');
}

printWidth(String id) {
  print('${id}:');
  CssStyleDeclaration elem = querySelector('#${id}').getComputedStyle();

  print('width: ${elem.width}');
  print('borderLeftWidth: ${elem.borderLeftWidth}');
  print('borderRightWidth: ${elem.borderRightWidth}');
  print('paddingLeft: ${elem.paddingLeft}');
  print('paddingRight: ${elem.paddingRight}');
}

prints

id1:
width: 24px
borderLeftWidth: 1px
borderRightWidth: 1px
paddingLeft: 1px
paddingRight: 1px
id2:
width: 32px
borderLeftWidth: 1px
borderRightWidth: 1px
paddingLeft: 1px
paddingRight: 1px
id3:
width: 0px
borderLeftWidth: 1px
borderRightWidth: 1px
paddingLeft: 1px
paddingRight: 1px
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • Hi Gunter, Many thanks for that. My table is fully generated/dynamic - I only define
    in the html file. I tried setting the cell.id='#a'+cell.hashcode.toString() (when I create the cell). Then I use your method above, but the returned "elem" is always null. I call it immediately after setting the cell.id. :( Cheers, Steve     – Lymp May 11 '15 at 08:09
  • 1
    The `#` is part of the selector not of the id. `#` is to tell `querySelector` it should look for the id, not the tag name. See my code, only in Dart code `#` is used but not in the HTML part. – Günter Zöchbauer May 11 '15 at 08:11
  • Hi, Sorry, my typo here. My code was er... 'correct'. But I have now tried cell.id=''A"+hashcode.tostring() and the query as querySelector('#${id}'). No change. – Lymp May 11 '15 at 09:40
  • I'm not sure what your last comment means. Does it work for you now? – Günter Zöchbauer May 11 '15 at 09:42
  • Hi Gunter. Thanks for persevering with me! No it doesn't work. I still get a null element. I've tried a few variations. I will play further, and set one cell element id to something recognisable, and try to retrieve it. Might be a shadowRoot problem. I'll report back when I find a solution. cheers, Steve – Lymp May 11 '15 at 17:11
  • So, you are using Polymer? Do you have a custom `main()` method where you execute this code or is this code inside a Polymer element? http://stackoverflow.com/a/20982658/217408 – Günter Zöchbauer May 11 '15 at 17:14
  • Hi, yes, I'm using Polymer, and my table is inside a polymer template. cheers, – Lymp May 12 '15 at 19:19
0

This has worked for me:

      cell.contentEdge.width;
Lymp
  • 933
  • 1
  • 7
  • 20