PDA

View Full Version : GXT 2.2.6 - FadeIn effect nullifies CSS property for opacity/filter



|ZUTI|
5 Aug 2012, 1:23 AM
Hi guys.

The problem is this: I am loading a bunch of HtmlContainer objects into a list. Selected item in that list gets full opacity (100%), others have it set to 60%. By doing that user can easily see which item in the list is currently selected. Works fine when I also set setStyleName property accordingly on HtmlContainer onMouseOver/onMouseOut events. It is working perfectly.

Then comes the problem. I wanted also to add fadeIn effect for items that are being loaded. You know uers... Anyhow. By itself, items are fading in nicely. It is nice to see BUT the opacity setting is ignored. Other CSS settings that are specified for certain event are taken into account (ie padding, background colour, fonts...), all but opacity/filter ones.

Any solution to this? Sample code is as this:

CSS styles:

.image_container_selected{
background: #DFE8F6;
float: left;
margin: 2px;
text-align: center;
}


.image_container_default
{
background: #DFE8F6;
opacity: .70;
filter: alpha(opacity=70);
filter: “alpha(opacity=70)”;
}

Mouse events:

html.addListener(Events.OnMouseOut, new Listener<DomEvent>() {
@Override
public void handleEvent(DomEvent be)
{
if( be.getSource() instanceof HtmlContainer )
{
HtmlContainer source = (HtmlContainer)be.getSource();
source.setStyleName("image_container_default");
}
}
});

This is the relevant code. I set the container style as source.setStyleName. And I load effect by first ensuring that container that holds the HtmlContainers is visible and rendered. Then I call HtmlContainer.el().fadeIn(FxEffect.NONE).

Like I said, only opacity/fade values are ignored. Any ideas on how to get around this? I can always put a frame around selected item, but with opacity the effect is much much nicer.

Thank you!