Hybrid View

    You found a bug! We've classified it as TOUCH-3781 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    4
    Vote Rating
    3
    jdrowell is on a distinguished road

      2  

    Default List Items with height > 47px not rendered correctly.

    List Items with height > 47px not rendered correctly.


    I just upgraded an app from Sencha Touch 2.0.1.1 to 2.1.0, no code changes, and it broke the rendering of my List items. This is a restaurant menu app that shows pictures inside list items, typically resulting in a x-list-item height of 140px. With 2.0.1.1, the rendered list items looked like this:

    <div class="x-list-item" id="ext-element-20"><div class="x-list-item-label"><img style="float: left; margin-right: 15px" class="eyb-thumbnail" src="/images/items/120/8.jpg" width="120">Sashimi Simples R$33.90<br><span style="color: #666; font-size: 80%;">5 Atum, 5 Salmão e 5 Peixe Branco</span><div style="clear: both"></div></div></div>

    Which is pretty beautiful in my opinion, and worked perfectly. In 2.1.0, it gets rendered to this monstrosity:

    <div class="x-container x-list-item x-stretched" id="ext-listitem-4" style="min-height: 47px !important; -webkit-transform: translate3d(0px, 166px, 0px); "><div class="x-dock x-dock-horizontal x-stretched" id="ext-element-49"><div class="x-unsized x-list-header x-item-hidden" id="ext-component-16" style="display: none !important; "><div class="x-innerhtml " id="ext-element-51"> </div></div><div class="x-dock-body" id="ext-element-50"><div class="x-inner x-list-item-inner" id="ext-element-48"><div class="x-unsized x-list-item-body" id="ext-component-14"><div class="x-innerhtml " id="ext-element-52"><img style="float: left; margin-right: 15px" class="eyb-thumbnail" src="/images/items/120/8.jpg" width="120">Sashimi Simples R$33.90<br><span style="color: #666; font-size: 80%;">5 Atum, 5 Salmão e 5 Peixe Branco</span><div style="clear: both"></div></div></div></div></div><div class="x-unsized x-item-hidden x-list-disclosure x-dock-item x-docked-right" id="ext-component-15" style="display: none !important; "></div></div></div>

    Which, apart from the awful "!important" CSS, and the unnecessary DIV nesting, simply doesn't work. The -webkit-transform CSS used to position the list items starts with the default spacing of 47px per list item, and when you scroll the list somewhat this gets recalculated to the 140px actual list item size gap, _if_ the list is long enough so that you can scroll it to force the recalculation.

    IMHO the 2.0.1.1 solution was much cleaner both in the HTML it generated and in how it actually works, which is by allowing the items to flow instead of absolutely positioning them.

    -jd

  2. #2
    Sencha User
    Join Date
    Jul 2012
    Posts
    23
    Vote Rating
    6
    Razr is on a distinguished road

      0  

    Default


    I am facing the exact same problem at the moment when trying to embed images in my list items template. I read in another thread that you can try to add this to the listConfig:
    Code:
    variableHeights: true
    The description looks promising like it should solve our problem (allowing different row heights) although it does not have any effect in my situation.

    Also I strongly agree about your point about the generated HTML by Sencha. The output from 2.0.1.1 is more efficient and allows for better flow of your elements.

  3. #3
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Berne, Switzerland
    Posts
    714
    Vote Rating
    42
    ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about

      0  

    Default


    welcome to the club: http://www.sencha.com/forum/showthre...leHeights-true

    As a work around I found out that adding a deferred refresh() on the list helps most of the time.

  4. #4
    Sencha User
    Join Date
    Jan 2012
    Posts
    4
    Vote Rating
    3
    jdrowell is on a distinguished road

      1  

    Default Partial solution and another bug uncovered

    Partial solution and another bug uncovered


    Browsing through the source code I found the (documented) config "itemHeight" which in my case works (at least for most items) as the heights in this specific list are constant. So just setting that (in this case to 114) made the initial rendering of the list almost correct.

    The new bug is that when you set the itemHeight, _and_ have grouped items (yes I have those :P), the first item in the group is not positioned correctly because the group header seems to be a part of the list item itself. As with the initial rendering problem, this is all fixed when you scroll the list up and down some. The problem here is that the x-list-header is being rendered _inside_ the x-list-item.

    I tried using the variableHeights and refresh() suggestions and they didn't work for me. Ingo could you supply a snippet showing how you use refresh()? I tried it on the console and nothing happened.

    The new absolutely positioned list items seem to try to guess what the DOM elements will be rendered to, and this will break in a lot of cases. I'd rather then not try to calculate those in advance and leave it to the browser to adjust the heights at actual render time. The rendering only happens once so it should not be very expensive.
    Last edited by jdrowell; 25 Nov 2012 at 11:22 AM. Reason: clarification

  5. #5
    Sencha User
    Join Date
    Jul 2012
    Posts
    23
    Vote Rating
    6
    Razr is on a distinguished road

      0  

    Default


    I indeed also tried setting 'itemHeight' and although this does what it promises, I preferably do not use it. Just because I use percentages for my width values in my item template, so the content scales nicely with the end-users resolution. If I set the items height to a fixed value that of course stops working.

    Using the refresh function is not an option since I am working with a NestedList and this function seems to be only present in the List component. Thanks for your suggestion though. Switching back to 2.0.1 seems to be the best solution for now.

  6. #6
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Berne, Switzerland
    Posts
    714
    Vote Rating
    42
    ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about

      0  

    Default


    I get my list data from a server. I have autoLoad=false and do a store.load() in my controller. In the store loads callback I then do this:
    Code:
    // refresh the list to update the item heights
    var myList = this.getMyList();
    Ext.defer(function(){ myList.refresh(); }, 100, myList);
    I noticed that doing a refresh() immediately does not change anything. It needs to be deferred.

    I have pics and icons in my lists. So without the refresh the lists are really messy until one resizes the browser window...

  7. #7
    Sencha - Support Team mike.estes's Avatar
    Join Date
    Mar 2011
    Location
    Redwood City, CA
    Posts
    221
    Vote Rating
    9
    mike.estes will become famous soon enough

      0  

    Default


    I'm going to go ahead and push this into our internal tracker as I do agree that there is a bug here. Thanks for working on this issue with me, we will get it fixed up!

  8. #8
    Sencha User
    Join Date
    Jan 2012
    Posts
    4
    Vote Rating
    3
    jdrowell is on a distinguished road

      0  

    Default


    Thanks for your suggestions Mike.

    I can confirm that setting the width and height for the images works with my regular List. Previously we were only setting the width to allow for auto-scaling the height, but we can live with a fixed height in this project. Tested this workaround in Chrome (Chromium 22.0.1229.94), with images in cache and with forced refresh, and on an iPad 2 with iOS 6.01.

    Please note that setting variableHeights to false re-introduces the bug, even when setting the image height and width in CSS. It seems that the main culprit is at line 828 of List.js:

    if (info.variableHeights) { updatedItems.push(item);
    }

    Putting and "if (true)" there renders correctly when variableHeights is false (which is semi-obvious, there are lots of other ifs related to variableHeights). It should probably me something more specific, like "if (info.variableHeights || height != defaultHeight)" (metacode).

  9. #9
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Berne, Switzerland
    Posts
    714
    Vote Rating
    42
    ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about

      0  

    Default


    just stumbled across this one here: http://docs.sencha.com/touch/2-1/#!/guide/first_app
    Check out the first sample, the second (Blog) tab, in LivePreview and you will see the problem in the shown list.