Image causing layout problems

edited May 2013 in Newbie Questions
When enyo.Image is used the image loaded from url has variable size and container does not count in for image sizes when calculating dimensions, when browser is resized layout is recalculated and looks ok. This behavior is observed in chrome, firefox is behaving correctly.

Any ideas how to fix it?

Edit: Redoing layout catching onload event in container and it works as expected, somehow do not like that idea.


  • It sounds like you're using a Fittables layout. The problem is that with Fittables, Enyo calculates how much space is available by looking at all elements inside the Fittables control; because you're loading the image in and not providing it with absolute sizes, it results in an incorrect calculation.

    Since you said that the images being loaded have variable sizes, I'd recommend what you do is add an event handler, called onload, to the enyo.Image. Set the handler for that to "resized" and when the image loads the Fittables code should recalculate the sizing and you should end up with a correct sizing/layout.
  • If you're loading lots of images, you may want to throttle calls to resized using enyo.job so it doesn't get called too often if images are still being loaded.
  • @unwiredben - good point about enyo.job
    I read
    enyo.job: function(inJobName, inJob, inWait)

    Are there any recommendations about the using a name space for inJobName ?
    (How protect/hide my jobnames from others?)
    There is no such Enyo kind like kind.job or a jobManager ..
  • @arthur thanks - that was my second though, even though it works as per my edit I think I'll try to improve it with @unwiredben suggestion to trhottle this as I can possibly have a lot images there.
  • we've added a version of enyo.job to enyo.Component in 2.3 to have protected namespaces (enyo.Component.startJob). For 2.2, I'd pick a name based on the component id plus something else.
  • @unwiredben - ok - thanks again.
Sign In or Register to comment.