Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    104
    Vote Rating
    0
    rbahumi is on a distinguished road

      0  

    Default '<img>' height is ignored inside a list's item

    '<img>' height is ignored inside a list's item


    REQUIRED INFORMATION


    Ext version tested:
    • sencha-touch-2.1
    Browser versions tested against:
    • Android 4.0.3 native Application
    • Chrome
    Description:
    • On Android, an '<img>' height is ignored inside a list's item. This is causing the next list item to appear on top of it.
    • On Chrome, the same issue appears on the first time index HTML is loaded, and the issue is being fixed by itself after a few seconds. Sequencing loads afterwards, don't show any issue.
    Screenshot_2012-12-27-13-15-01.jpg
    Steps to reproduce the problem:
    • Define a "Ext.dataview.List" with the following itemTpl config:
      Code:
      // "Ext.dataview.List" code.....
      itemTpl: [        
      '<tpl for=".">',
          '<li style="border: 2px solid red; margin: 1% 5% 7% 5% !important; padding-bottom: 2em; background-color: white; color: black !important; padding: 2%;">',
              '<div>This is a title:</div>',
              '<div>',
                  //add some content
                  '<div>',
                      '<h4>some content, line 1</h4>',
                      '<h4>some content, line 2</h4>',
                  '</div>',
                  // add an image
                  '<div style="margin-top:1em; margin-bottom:1em;">',
                      '<img style="display:block; margin-left: auto; margin-right: auto; max-width: 80% !important;" src="https://surf-space.com/wp-content/uploads/spots/user_reports/1/1_1354866075.jpg"/>',
                  '</div>',
              '</div>',
          '</li>',
      '</tpl>'
      ]
    The result that was expected:
    • Image size is calculated as if it was any other type of content. List items don't overlap each other.
    The result that occurs instead:
    • The image height is being ignored, which leads to a list of items that appear on top of each other.
    Possible fix:
    • Adding an explicit 'height' style configuration to an image solves the issue.
      Code:
      '<img style="height: 160px; display:block; margin-left: auto; margin-right: auto; max-width: 80% !important;" src="https://surf-space.com/wp-content/uploads/spots/user_reports/1/1_1354866075.jpg"/>',
    Screenshot_2012-12-27-13-16-19.jpg
    Operating System:
    • Win 7

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,735
    Vote Rating
    756
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I simplified your itemTpl to still display the issue. Also, here is the test case you should have provided, a locally runnable test:

    Code:
    Ext.Viewport.add({
        xtype     : 'list',
        store     : {
            fields : [],
            data   : [
                {},
                {}
            ]
        },
        itemTpl   : [
            '<div style="border: 2px solid red;">',
                '<img style="max-width: 80% !important;" src="https://surf-space.com/wp-content/uploads/spots/user_reports/1/1_1354866075.jpg"/>',
            '</div>',
        ],
        listeners : {
            order  : 'before',
            select : function () {
                return false;
            }
        }
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,735
    Vote Rating
    756
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Thanks for the report! I have opened a bug in our bug tracker.

  4. #4
    Sencha User
    Join Date
    Sep 2012
    Posts
    104
    Vote Rating
    0
    rbahumi is on a distinguished road

      0  

    Default


    Hi @mitchellsimoens,

    I see that this bug report was closed with reason:
    Looks like we can't reproduce the issue or there's a problem in the test case provided.


    Is this a mistake? (you have said that
    I simplified your itemTpl to still display the issue.
    )

    Anyway, this issue still exists in Sencha Touch 2.2 beta 1. Here is a test case:
    Code:
    Ext.Viewport.add({
     xtype     : 'list',
     id          :    'mylist',        
     store     : {
      fields : ['img'],
      data: [
       {img: 'https://surf-space.com/wp-content/uploads/spots/user_reports/98/98_1362818099_small.jpg'},
       {img: 'https://surf-space.com/wp-content/uploads/spots/user_reports/59/59_1362734156_small.jpg'},
       {img: 'https://surf-space.com/wp-content/uploads/spots/user_reports/79/79_1362636279_small.jpg'},
       {img: 'https://surf-space.com/wp-content/uploads/spots/user_reports/119/119_1362570847_small.jpg'},
       {img: 'https://surf-space.com/wp-content/uploads/spots/user_reports/79/79_1362555278_small.jpg'},
       {img: 'https://surf-space.com/wp-content/uploads/spots/user_reports/242/242_1362545894_small.jpg'},
       {img: 'https://surf-space.com/wp-content/uploads/spots/user_reports/242/242_1362468439_small.jpg'},
       {img: 'https://surf-space.com/wp-content/uploads/spots/user_reports/242/242_1362467632_small.jpg'},
       {img: 'https://surf-space.com/wp-content/uploads/spots/user_reports/47/47_1362467437_small.jpg'}
      ]
     },
     itemTpl   : [
      '<div style="border: 2px solid red; width:90%; margin-left:auto; margin-right:auto">',
       '<img style="width: 102% !important; margin-left:-1%;" src="{img}"/>',
      '</div>',
     ],        
     listeners : {
      order  : 'before',
      select : function () {
       return false;
      }
     }
    });
    Resizing the window, closing/openning the dev console or calling 'doRefresh()' explicitly on the list solves the issue.
    Please advice.

    Here is a printscreen from Goggle Chrome:

    listImgHeightBug.jpg

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

      1  

    Default


    This issue sounds very similair to this one: TOUCH-3781.

    Unfortunately there is no feedback at all from the moment the Sencha team decides to make something a bug. I have no idea where I can check the status, whether this issue is on a back-log or scheduled for a sprint. That could use improvement.

  6. #6
    Sencha User
    Join Date
    Mar 2013
    Posts
    1
    Vote Rating
    0
    davidmohoric is on a distinguished road

      0  

    Default


    Go to sencha-touch-all-debug.js and find section config:

    itemHeight: 47 set to itemHeight: 0 !

  7. #7
    Sencha User
    Join Date
    Sep 2012
    Posts
    104
    Vote Rating
    0
    rbahumi is on a distinguished road

      0  

    Default


    Thanks for the suggestion @davidmohoric

    But your suggested solution did not solve the issue....


film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar