How to get `:after` to work in extjs iconCls?


Tags: css,extjs,extjs4,extjs4.1,extjs3

Problem :

My css for a tree node icon is the following:

.icon {
    background: url(http://dummyimage.com/100x100/ccc/fff);
    width: 100px;
    height: 100px;
    position: relative;
}
.icon:after {
    background: url(http://dummyimage.com/32x32/f0f/fff);
    width: 32px;
    height: 32px;
    display: block;
    content: ' ';
    position: absolute;
    bottom: 0;
    right: 0;
}

I set iconCls to "icon" but it does not work, I also tried "icon icon:after" and "icon:after" but with no luck.

I use a modern browser and my overlay css is valid, but extjs doesnot seem to understand it. How can I overcome this problem?



Solution :

The icon element is by default an <img> element. It's contents are replaced by the image. You can't use :before or :after with it, because they form part of the contents that get replaced. You will need to override the treeRenderer in Ext.tree.Column to apply your second image.


    CSS Howto..

    CSS How to center a div horizontally

    How to stop Injected HTML-div / CSS from inheriting styles ? (Internet Explorer)

    How can I make a 2-level navigation bar? [closed]

    How to create tabs using Javascript and Jquery

    How do I keep my background image at the bottom of the page?

    How to set css attribute for pseudo element in Dart

    How to fade loop background images?

    How to create this material design background (see image below) with CSS?

    How to change the way a copy-paste text behaves?

    How do I detect box-sizing border-box support with Modernizr

    AngularJS ng-show directive showing elements before hiding elements

    How to use css method of rotation in jquery

    How to put images to the right and text to the left in css

    How to insert a div in between flexbox rows and keep everything responsive?

    Block grid shows horizontal scroll bar in Foundation

    How to change hover background on links in css?

    How to remove hover effect from CSS?

    How to display a list in two rows?

    How to align radio buttons with labels in one line? [duplicate]

    How to center this popup text box

    how to make list view of show type given below?

    How do I increase the height of a menu divider in a navigation?

    How to set height of vertical tab in css?

    How to Implement this UI with CSS [closed]

    How to check image is visible (Webdriver)

    How to simplify cross-browsing css animation keyframe?

    How would I go about setting a CSS gradient background in JavaScript?

    Foundation 6: How to set .is-open-right translateX value with JavaScript

    CSS: How does setting a right margin cause the element's parent to become visible in this example?

    How to add text or characters using CSS (no javascript)?