PDA

View Full Version : [CLOSED] Need an advice on using css..



alex303
Apr 22, 2014, 11:54 AM
after upgrading from version 2.4 to 2.5.1 I had problems with displaying sprites in menu items.
Please look at the attached images...

In the new version ext.js appeared style


. x-menu-item-icon {
background-size: 16px auto;
}

at the moment, I redefine this style:


. x-menu-item-icon {
background-size: auto auto! important;
}

and everything works... But there are doubts. Maybe there is a better way to use sprites for the menu items? Given the fact that I use all the themes.

Vladimir
Apr 22, 2014, 2:19 PM
Hi

I cannot reproduce the issue, it seems icons are displayed fine in online samples
http://examples2.ext.net/#/Toolbar/Menu/Overview/

alex303
Apr 22, 2014, 2:29 PM
Hi

I cannot reproduce the issue, it seems icons are displayed fine in online samples
http://examples2.ext.net/#/Toolbar/Menu/Overview/

Vladimir, As I saw in your example - there is a single image per file (link for background)... but I have a sprite - a set of images in single file, and background-position in css to choose one:


.act_add {
background-image: url('../../content/images/actions.png') !important;
background-position: 0 0 !important;
}

.act_duplicate {
background-image: url('../../content/images/actions.png') !important;
background-position: -16px 0 !important;
}

.act_edit {
background-image: url('../../content/images/actions.png') !important;
background-position: -32px 0 !important;
}

Vladimir
Apr 22, 2014, 2:41 PM
Well, in this case, may be it is better to add 'background-size' rule directly to your rules for icon (.act_add, .act_duplicate and so on)

alex303
Apr 22, 2014, 2:55 PM
Well, in this case, may be it is better to add 'background-size' rule directly to your rules for icon (.act_add, .act_duplicate and so on)
Well, I did it... but not sure this is right way... Maybe there are any property, or some kind of setting to use or not use ext.js background-size style for menu items. In my mind, allways use background-size for any menu item images is strange... If there no possibility to globally disable this style I will redefine it in my own css.

Daniil
Apr 22, 2014, 8:33 PM
Hi,

I don't quite understand why you are not OK with

. x-menu-item-icon {
background-size: auto auto! important;

}



if "everything works".

Could you, please, clarify?

alex303
Apr 22, 2014, 11:09 PM
Hi,

I don't quite understand why you are not OK with

. x-menu-item-icon {
background-size: auto auto! important;

}



if "everything works".

Could you, please, clarify?

yes. i did the same. and it's work fine...
but I do not really understand why it was necessary to add style background-size at the library, because now using sprites will always needs to override that style, just only for disable it. At my opinion, much more logical for those who wants to scale their images for menu items - set background-size style manually, and do not hardcode this style at ext.net library.

ps. from svn I found this thread http://forums.ext.net/showthread.php?29291 I think it's not a very good solution (((

Daniil
Apr 23, 2014, 1:17 AM
Yes, that makes sense. Probably, we just didn't think about such a case.

Though, that change makes sense as well, because @blurken had a breaking change upgrading from v2.0.

So, it is a bit controversial.

I think we are not going to revert it back not to introduce a breaking change again. Moreover, it is easy to overcome.

Sorry for the inconvenience.

alex303
Apr 23, 2014, 7:59 AM
Yes, that makes sense. Probably, we just didn't think about such a case.

Though, that change makes sense as well, because @blurken had a breaking change upgrading from v2.0.

So, it is a bit controversial.

I think we are not going to revert it back not to introduce a breaking change again. Moreover, it is easy to overcome.

Sorry for the inconvenience.

Ok. I will not argue. But I'm sure a lot of people like me, and it will be an unpleasant surprise. Least because the sprites, especially when used in the menu items are recommended and best practice. I think the right decision, for example, at the level of the menu control, provide the sign(bool) of automatically resize images. And of course, its value by default must be false. Then value is true the background-size style will applied.

I have no more questions. Let's close topic.