Toolbar at wrong height on first load

Hi all,

I'm currently fighting with this problem from 3 days so it's time to ask for help ;)

I'm simply trying to add an image on a toolbar.
Problem is I don't specify the size of image since I don't know it.
So, at first image load, the toolbar height is totally wrong.
If image is on cache, height is almost good (get a few pixels at bottom from nowhere)
I tried to react to imageload (and call reflow() and / or resized() without success) and with a lot of CSS tricks but nothing made it...

Here is a jsfiddle of what I'm talking about...
http://jsfiddle.net/4HfGw/5/ (remember to clean cache before each test else it will work as expected)

Note that, in final, this is what I want
http://jsfiddle.net/4HfGw/4/
(an image and a text at the same place, text will be hidden on image load)

So...HELP ! :)
What should I do...?
will some style/css do the magic ?

Thanks

Wil

Comments

  • You have to call reflow() on the kind with the Layout. It doesn't waterfall down so calling it on your app won't work for child controls. Here's your example with the onload hook added.

    http://jsfiddle.net/ryanjduffy/4HfGw/6/

    N.B. I used enyo.job to simulate the image load delay; you don't need to keep that.
  • edited May 2013
    Thanks for the help, it solved my problem but created another one...
    you'll notice List (which should fit) won a scrollbar :(

    It seems that, in fine, the culprit is the list not the image...
    If I update the list, I get the same result as you...
    http://jsfiddle.net/4HfGw/7/

    notice the fit:false, fit:true to force the update :(
    Something prettier should exist ...

  • Use list.refresh() to tell it to update its internal size.

    http://jsfiddle.net/ryanjduffy/4HfGw/10/
  • ...I must say it's really confusing...
    reflow, refresh, resized, .... it's a bit hard to know which one needs to be called...

    anyway, it works on this part of code...now I need to fix it on the full project

    Thanks a lot!
  • It is confusing. It took some trial and error to find the right method. In general:

    * reflow() is used on a Control with a Layout defined. Generally, this is required to fix FittableLayouts when their children are resized but could apply to any Layout.
    * refresh() is unique to List. I haven't used it in the past for layout issues but is appears that List resizes its internal DIV to the bounds of its scroller. So, if you resize the List control (as the FittableRows does in your example), you have to call refresh() to force List to fix its internal sizing.
    * resized() informs children of a control that their parent has resized so they can react. This will trigger reflow() to be called by those children. Having thought about it to describe it, that would have worked for you as well. See the fiddle below:

    http://jsfiddle.net/ryanjduffy/4HfGw/11/
  • > It is confusing.
    .. and then there is enyo.control render() and enyo.list reset()
    Ryan, thanks for your descriptions.
    I wanted to bookmark your answer in this forum - but it appears there is no bookmarking in this forum. This topic would be good for some blog article or a chapter in an Enyo training.
  • render() is the nuclear option. It rebuilds everything at and below that instance. It's usually the most expensive option.

    reset(), as you said, is also unique to List. It is similar to refresh() except that it rerenders from the top of the list and scrolls to the top whereas refresh maintains the current position.
Sign In or Register to comment.