Results 1 to 6 of 6

Thread: [4.1.1] TabPanel tab icons first 1px line is clipped

    Looks like we cannot reproduce this. Please provide another test case to reproduce this issue.
  1. #1
    Touch Premium Member
    Join Date
    Jun 2008
    Location
    Germany, Dortmund
    Posts
    249
    Vote Rating
    16
      0  

    Default [4.1.1] TabPanel tab icons first 1px line is clipped

    Using silk icons lib (16x16 px) as tab panel icons via iconCls the icons top most 1 pixel line is clipped inside tabpanel.

    Problem exists in Firefox and also IE (so maybe generall issue).

    If you zoomout the screenshot, you will see the missing 1px top line, that is show befond in panel header.

    Screenshot:
    ext411_tabpanel_iconcls_issue.png
    Attached Images Attached Images

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      0  

    Default

    looking at the examples/tabs/tabs-adv.html the icons are appropriately sized and not cut off in FF14 and Chrome 20 on Windows or Mac.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Touch Premium Member
    Join Date
    Jun 2008
    Location
    Germany, Dortmund
    Posts
    249
    Vote Rating
    16
      0  

    Default

    Hi Mitchell,
    nice try, but the used icon tabs.gif is squared and has some transparent pixels on top!

    There for you will not notice missing/clipped line at the top of the image!

    If you use an icon that starts with show pixels in first line, you'll see the same behavior.

    Believe me ;-)

    Cheers Holger

  4. #4
    Touch Premium Member
    Join Date
    Jun 2008
    Location
    Germany, Dortmund
    Posts
    249
    Vote Rating
    16
      0  

    Default

    Steps to reproduce:

    1) replace ..\examples\tabs\tabs-adv.css tabs class by

    Code:
    .tabs {
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAEBJREFUOE/tk7ENACAMw3wN1/C/GPjFhBfISiWPraImgaEVQi68wxQbkB0F7+CK/AIyeUHDd+G7kPw0Pbi7dRcOgtc33xdoo4wAAAAASUVORK5CYII=') !important;
    }
    2) open ..\examples\tabs\tabs-adv.html inside browser and see result

    tab-issue.png


    3) compare to original icon and see missing blue first line!

    tab-issue-icon.png

  5. #5
    Touch Premium Member
    Join Date
    Jun 2008
    Location
    Germany, Dortmund
    Posts
    249
    Vote Rating
    16
      0  

    Default

    State should be open again!

  6. #6
    Ext JS Premium Member
    Join Date
    Jan 2008
    Location
    Germany, Berlin
    Posts
    135
    Vote Rating
    11
      0  

    Default

    confirmed, still 1px on top is cut off (using Chrome, FF) on 4.1.1

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •