27 March 2008

Menu Icon Alignment in ExtJS 2.0

Okay, so I'm creating me up a pretty series of menus for a toolbar I'm working with in ExtJS. I've got some utterly delectable little icons from Famfamfam.com that I'm working with, and I'm putting them in with my custom "makeIconCls" function I talked about a while back.

However, I was using Famfamfam's "flags" icon set in addition to their "silk" set, and the icons are being aligned like this:



See how the little flag icon is a bit higher than the rest? It's because it's slightly shorter -- annoying as hell, and I was about to just leave it, until I decided to give it one last go...

Which let me to the good ol' w3schools site and their page on background positioning and attachment variables.

So, I changed my makeIconCls function to add a few more definitions:
var makeIconCls = function (className, url, id) {
Ext.util.CSS.createStyleSheet(
'.' + className + '{background-image: url(' + url + ') !important;'
+ 'background-repeat: none;'
+ 'background-position: center left !important;'
+ 'background-attachment: fixed;}'
, id
);
return className;
};

Note the "!important" after the "background-position" parameter -- without it, this won't work. However, don't try and be smart and put "!important" after any other param -- it makes your icons disappear in Mozilla!

Now, my icons are all pretty, and I'm happy.

1 comment: