Results 1 to 7 of 7

Thread: Tab Images

  1. #1
    Ext JS Premium Member Lloyd K's Avatar
    Join Date
    Oct 2007
    Location
    Brighton, United Kingdom
    Posts
    655

    Question [Solved] Tab Images

    With a TabPanel I set the iconCls for each panel, now when the tabPosition is at the top the tabs and icons render fine, however when tabPosition is bottom although they render they are rendered with padding to the left and the tabs sometimes have glitches.

    Is this a known thing? Any workarounds?

  2. #2
    Ext JS Premium Member Lloyd K's Avatar
    Join Date
    Oct 2007
    Location
    Brighton, United Kingdom
    Posts
    655

    Question

    Here is a screenshot to further show what the issue with.


  3. #3
    Ext JS Premium Member Lloyd K's Avatar
    Join Date
    Oct 2007
    Location
    Brighton, United Kingdom
    Posts
    655

    Default

    Also, with tabs in the bottom position and enableTabScroll set to true, this error happens:

    this.header has no properties
    http://localhost/ext2/ext-all-debug.js
    Line 18748

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854

    Default

    Did you look at the rendered HTML when the tabs are bottom vs top. Is it different? Is some other class being applied that's adding padding?

    Bottom scrolling tabs are not supported - see the config doc.

  5. #5
    Ext JS Premium Member Lloyd K's Avatar
    Join Date
    Oct 2007
    Location
    Brighton, United Kingdom
    Posts
    655

    Default

    Gah shoddy! :p Well the scrolling is not big issue anyhow but the icon thing is, following your advice I looked at the CSS thing and I can't see anything different, when top or bottom they both use x-tab-left, x-tab-right, x-tab-with-icon etc.

    One different I did notice was with the classes saying if it was top or bottom:

    --- Top ---

    .x-tab-strip-top .x-tab-strip-active .x-tab-left {ext-all.css (line 103)
    background-position:right -301px;
    }

    --- Bottom ---

    .x-tab-strip-bottom .x-tab-left {ext-all.css (line 109)
    padding:0pt 10px;
    }

    .x-tab-strip-bottom .x-tab-left {ext-all.css (line 106)
    background:transparent url(../images/default/tabs/tab-btm-inactive-left-bg.gif) no-repeat scroll left bottom;
    }
    So I'm not sure where exactly the issue is as I don't fully understand how it's rendered, is it the 10px throwing it off?

  6. #6
    Sencha User hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,966

    Default

    Gah, is right! shoulda looked (deeper) before leaping.

    I'll remove that post immediately !
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  7. #7
    Ext JS Premium Member Lloyd K's Avatar
    Join Date
    Oct 2007
    Location
    Brighton, United Kingdom
    Posts
    655

    Question

    I'm still fighting this issue, nothing I try seems to work :/

Posting Permissions

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