Button icon horizontal alignment with iconAlign: "top"

Question

In ExtJS 4, I am attempting to create a vertically-oriented ButtonGroup with one button to start:

new Ext.ButtonGroup({
    columns: 1,
    region: "west",
    collapsible: false,
    defaults: {
      scale: "large",
      iconAlign: "top"
    },
    items: [{
      text: "Your Books",
      iconCls: "icon-books"
    } ]
  })

The CSS rule just specifies the background image:

.icon-books {
   background-image: url(/images/book_open.png) !important;
}

However, the image is flush left, as is illustrated below:

enter image description here

I'm quite the n00b with ExtJS, so I'm sure there's something obvious that I am missing. I would have expected iconAlign: "top" to align the image centered horizontally in addition to flush-top, but that's not what seems to happen. I am seeing the same effects on Firefox 6.0.2 and Chrome 13.0.

What config option or CSS rule am I missing?

Thanks!

UPDATE: here is a sample project demonstrating the issue.

http://stackoverflow.com/questions/9881758/contentprovider-with-multiple-tables — confucius, Mar 27 '12 at 12:31

score 3 · Answer 1 · answered Sep 09 '11 at 05:49

3

I think there is a problem with the image itself, or some other css class is causing this problem. Ext Js automatically centers the icon when iconAlign : 'top' is set. Here's the what's written in the css:

.x-btn-text-icon .x-btn-icon-small-top .x-btn-text{
    background-position: center 0;
    background-repeat: no-repeat;
    padding-top:18px;
}

When I tried this myself, I had no problems at all.

enter image description here

As you can see, the icon is aligned perfectly. Please check if some other css is interfering with the icon class defined by Ext

answered Sep 09 '11 at 05:49

Varun Achar

14,781
7
57
74

The images are plain 32x32 pixel PNG files. There is no manual CSS that would affect this element other than the rule you see above. If it matters, the `Button` is in a `ButtonGroup` in the `west` portion of a `BorderLayout` of a `Viewport`. I have added a link to a sample project demonstrating the problem. I am far from a CSS expert (which is why I'm using ExtJS in the first place), but I agree that things should be working from what I can tell. However, they aren't... :-) Thanks! – CommonsWare Sep 09 '11 at 11:07
there is a problem with your `ext-all.css` file. According to the docs, "the image will be set as the background-image CSS property of the button by default, so if you want a mixed icon/text button, set `cls:'x-btn-text-icon'`)". In your `css` i can't find anything with `x-btn-text-icon` in it. – Varun Achar Sep 09 '11 at 12:01
`x-btn-text-icon` does not exist anywhere in ExtJS 4.0.2a, except in the `sandbox` example. – CommonsWare Sep 09 '11 at 12:27
I guess you could download the `ext-all.css` file and try again.. I don't use Ext JS 4, so I don't have a means of checking if there is a conflict in the version that you've download and what others are using. But as of ExtJS 3.3.1, `x-btn-text-icon` exists in the `css` as mentioned in the answered above. But from what is written in the documentation, I can only conclude that there seems to be some discrepancy in the version of `ext-all.css` that you're using. Thanks :) – Varun Achar Sep 09 '11 at 14:55

score 2 · Answer 2 · answered Nov 29 '11 at 21:08

For ExtJS 4.0, the following works for me: I have to override the default width of 16px as set by the x-... classes.

In my button I add my own custom class (note the 'star' class simply loads the background image).

iconCls: 'star backcenter'

And then set it to be centered, with the width:auto to override the 16px. Magically it works for me.

.backcenter { 
   background-position:center  !important;
   width: auto !important;
}

score 1 · Answer 3 · answered Sep 08 '11 at 20:17

1

iconAllign: top from extjs just sets the icon to be above the text, not centered. To make the item centered, you have to deal with the css...

.icon-books {
   background-image: url(/images/book_open.png) !important;
   background-position:center;

}

I think this should do it ...

answered Sep 08 '11 at 20:17

nscrob

4,483
1
20
24

That sounds believable, but it does not appear to have an impact. When looking at things in Firebug, the `background-position` in my `.icon-books` rule appears with strikethrough when highlighting the element. If I am understanding Firebug correctly, my request is overridden... but the override appears to be for `center top`, which would seem like it would give me what I want anyway. Yet, that's not the visual effect. – CommonsWare Sep 08 '11 at 21:08
for me it works but for normal size icon... for scale large i checked the extj css and aparently it contains .x-btn-default-large-ml,{zoom:1;background-image:url('../../resources/themes/images/default/btn/btn-default-large-sides.gif');background-position:0 0} and the icon is displayed in the ml tag of the button div ... so maybe you can check if you have the same ,... i hope this helps – nscrob Sep 08 '11 at 21:45
`scale` only seems to support `small`, `medium`, and `large`, not `normal`. I tried `medium` and still have the same visual effect, just smaller. I'll just switch to `iconAlign="left"` if I can't work out a solution. Thanks, though! – CommonsWare Sep 08 '11 at 22:40

score 0 · Answer 4 · edited Jan 09 '13 at 07:56

0

I improve this issue by adding a css property (style:{paddingLeft:'10px'}) to button.

text:'<b>Cancel</b>',
name:'btCancel',
iconCls:'btCancel',
width:89,
height:37,
style:{paddingLeft:'10px'}

edited Jan 09 '13 at 07:56

jlordo

37,490
6
58
83

answered Jan 09 '13 at 07:34

Duy Phong

1

Button icon horizontal alignment with iconAlign: "top"

4 Answers4