Width of an element

[santiagorios]

Hello everyone in the dart community,

I've just started working with Dart, I'm exploring and trying to learn how it works and so far it's been a great journey. However, I just run into a problem which I haven't been able to figure out yet. I'm probably missing something very simple.

I have the following html:

<div id="test"><a href="photos/photo12.jpg"><img src="photos/photo12.jpg"></a></div>

What I'm trying to do is get the width of both, the div and the img. So far I have been able to get the width for the image but I can't find a way to get the width of the div. This is the code that I have in place:

 

int imgWidth = query('#test').query('img').width;

int divWidth = query('#test').width; 

The first line works like a charm, but the second one is raising an error. I have been researching and I have found some sources saying that using the dart:dom library is the way to go, but since that library has been deprecated, I'm trying to find a way to accomplish this by just using the dart:html library.

Thank you so much for any help or guidance, it's very appreciated. :)

Santiago

[Seth Ladd]

Hi Santiago,

Thanks for the question! You might be interested Element.rect(). From the ElementRect you can get to the ClientRect, which has a width.

BTW, in the future, Stack Overflow is a great place to ask these kinds of questions.

Hope that helps, keep us posted!

Seth

--
Consider asking HOWTO questions at Stack Overflow: http://stackoverflow.com/tags/dart
 
 

[santiagorios]

Hello Seth, 

Thank you so much for your answer. After I followed your suggestion I was able to accomplish the task that was before me.

Just as a future reference if someone is trying to accomplish a similar task, the code that did the trick for me was:

query("#test").rect.then((ElementRect r) {

  int imgWidth = query('#test').query('img').width;

  int divWidth = r.client.width;
});

I'll make sure to make my future questions in Stack Overflow. :)

Thank you,

Santiago

[Seth Ladd]

Glad it worked! And thanks for posting your solution, that will help future Dart users. :)