PDA

View Full Version : Animated CSS requires a xtype: label otherwise, not done correctly



Omer Paran
29 Nov 2012, 9:00 AM
I am doing animation of a red box across the screen (part of an Alert window).

In the touch version, all that is required is

panelItems.push(
{
cls: 'redBox'
}
 );

for the non-Touch, I must add:
panelItems.push(
{
xtype: 'label',
cls: 'redBox'
}
 );

If I don't add it, the box is shown and animated but it does not have the right height, which is really weird, all the rest works fine, except for the height of the box which is like double

here is the CSS style for the redBox

.redBox {
position:absolute;
left: 12px;
height: 10px;
width: 30px;
background-color: red;
text-align: left;

-webkit-animation-duration: 1s;
-webkit-animation-name: redbox;
-webkit-animation-iteration-count: 2;
-webkit-animation-timing-function: linear;

-moz-animation-duration: 1s;
-moz-animation-name: redbox;
-moz-animation-iteration-count: 2;
-moz-animation-timing-function: linear;
}

----------
All the styles are applied correctly except for the height if the label type is not part of the code

mitchellsimoens
1 Dec 2012, 7:34 AM
What does the panel look like?

Omer Paran
17 Dec 2012, 7:25 AM
Do you require the DOM created for the panel or a screen shot? Please explain

thank you

Omer.