Search This Blog

Posts

So far, Primefaces has used image sprites for displaying the sort icons. This leads to a problem if we want to make a different style for these icons; for example, I would make the icon "arrow up" more blurry at the first time the table loading because I want to highlight the icon "arrow down". I found a way that I can replace these icons with Font Awesome icons.

We will use "CSS Pseudo-classes" to achieve it. The hardest thing here is that we should handle displaying icons in different cases. There is a case both "arrow up" and "arrow down" showing and other case is only one of these icons is shown.

I searched from somewhere and found that a lot of people says a basic concept for implementing this feature looks like below:
HTML code:<div id="parent">
<div id="child">
</div>
</div>
And, CSS:#parent{
position: relative;
overflow:hidden;
}
#child{
position: absolute;
top: -1;
right: -1px;
}
However, I had a lot of grand-parents in my case and the above code didn't work. Therefore, I needed an alternative. I presumed that my app uses Boostrap and AngularJs, maybe some CSS from them affects mine. I didn't know exactly the problem, but I believed when all CSS is loaded into my browser, I could completely handle it.

www.tom-collinson.com

I tried to create an example to investigated this problem by Fiddle. Accidentally, I just changed: position: parent; to position: static; for one of parents -> the problem is solved.
Look at my code: