1. #1
    Sencha User
    Join Date
    Mar 2010
    Posts
    19
    Vote Rating
    0
    robot1125 is on a distinguished road

      0  

    Default How to fix 16x16 icons clipped in tabpanel?

    How to fix 16x16 icons clipped in tabpanel?


    It appears that standard 16x16 icons get clipped in the tabs of a default tabpanel. Even the Sencha advanced tabs example exhibits that behavior:

    IbH8X.png

    What is the preferred method to increase the height of the tabs in the tab bar so the entire icon will be displayed?


  2. #2
    Ext JS Premium Member neongrau's Avatar
    Join Date
    Mar 2007
    Posts
    249
    Vote Rating
    0
    neongrau is on a distinguished road

      0  

    Lightbulb


    i've fixed it with this css snippet:

    Code:
    .x-tab-default-top button,
    .x-tab-default-top .x-tab-inner {
      height: 16px !important;
    }

  3. #3
    Sencha User
    Join Date
    Mar 2010
    Posts
    19
    Vote Rating
    0
    robot1125 is on a distinguished road

      0  

    Default


    i've fixed it with this css snippet:

    Thank you, that works perfectly!

  4. #4
    Sencha User mediacept's Avatar
    Join Date
    Jan 2009
    Posts
    27
    Vote Rating
    0
    mediacept is on a distinguished road

      0  

    Default


    Thank you neongrau
    Best Regards,

    Ramzi Youssef
    MEDIACEPT Technology

  5. #5
    Sencha Premium Member
    Join Date
    May 2010
    Location
    Guatemala, Central America
    Posts
    1,324
    Vote Rating
    201
    ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold

      0  

    Default


    Quote Originally Posted by neongrau View Post
    i've fixed it with this css snippet:

    Code:
    .x-tab-default-top button,
    .x-tab-default-top .x-tab-inner {
      height: 16px !important;
    }
    Did you modified ext-xxx..css or put that in an extra css file?
    UI: Sencha Architect 3.x / ExtJS 4 & 5
    Server side: JEE / EJB 3.x / CDI / JPA 2.x/ JAX-RS / JasperReports
    Application Server: Glassfish / WildFly
    Databases: Oracle / DB2 / MySQL / Firebird

    If you like my answer please vote!

  6. #6
    Sencha User mediacept's Avatar
    Join Date
    Jan 2009
    Posts
    27
    Vote Rating
    0
    mediacept is on a distinguished road

      0  

    Default


    Just puted it in an extra css file called after the ext-xxx..css
    Best Regards,

    Ramzi Youssef
    MEDIACEPT Technology

  7. #7
    Sencha - Community Support Team edspencer's Avatar
    Join Date
    Jan 2009
    Location
    Palo Alto, California
    Posts
    1,939
    Vote Rating
    9
    edspencer is a jewel in the rough edspencer is a jewel in the rough edspencer is a jewel in the rough

      0  

    Default


    We'll get this fixed in the theme, should be in 4.1
    Ext JS Senior Software Architect
    Personal Blog: http://edspencer.net
    Twitter: http://twitter.com/edspencer
    Github: http://github.com/edspencer

  8. #8
    Ext JS Premium Member tangix's Avatar
    Join Date
    Mar 2010
    Location
    Stockholm, Sweden
    Posts
    563
    Vote Rating
    51
    tangix is a jewel in the rough tangix is a jewel in the rough tangix is a jewel in the rough

      0  

    Default


    Interestingly I see the opposite in FF8 on my app - the icon is clipped at the top and the CSS work-around does not help as shown in this picture, where the top pixels are missing:

    clipped icon.PNG

    Tested in 4.0.7 and 4.1-PR1 with same result.