Transformed div in zone

[A-dam]

Hi, any simple idea how to put scaled div in Zone component? The original w/h is taken into account, not the transformed one.

[Victoria_La]

Not sure exact situation because you did not post your code, but of zone applies transforation itself it may be removing yours,
the way to solve this is double wrap the div.
i.e.

Code: Select all

<div id="a_wrapper">
   <div id="a" style="transform: ..."></div>
</div>

[A-dam]

Code: Select all

<div id="a_wrapper">
   <div id="a" style="transform: ..."></div>
</div>

Thank you, but I have tried this with no result

[Victoria_La]

Sorry I did not read the post properly, that was generic way to keep transforms, but width/height is a different story. Do you set it programmatically?

[A-dam]

No, with css

my div is set like this:

Code: Select all

.pawn{
    width: 45px;
    height: 45px;
    background-repeat: no-repeat;
    position: absolute;
    background-image: url('img/pawns.png');   
}

transform is applied with add class

Code: Select all

.pawn.small{
    transform: scale(0.5);
}

and then put into Zone

Code: Select all

this.myZone.placeInZone( 'pawn_'+i);

Div inside zone still has width and height like original one, even with using wrapper.

Im not sure if it is even possible, so aking if anyone know about it.. I guess I can handle it with background-size and percantage position..

[Victoria_La]

Yes that is what I do in my games. All sprite position is relative in percentages and I scale with background-size

With div wrapper approach you should have set the size of the wrapper explicitly though

Code: Select all

.small_pawn_wrapper {
     width: 23px;
    height: 23px;
}

Code: Select all

<div class="small_pawn_wrapper" id="small_pawn_3">
   <div class="small pawn" id="pawn_3"></div>
</div>

[A-dam]

With div wrapper approach you should have set the size of the wrapper explicitly though

No, not working in the Zone, div behave like the original one. Using background-size and percentage is much better approach.

I was just curious if it can work, but I was not able to find solution.. Thanks anyway!