Hi, any simple idea how to put scaled div in Zone component? The original w/h is taken into account, not the transformed one.
Transformed div in zone
- Victoria_La
- Posts: 620
- Joined: 28 December 2015, 20:55
Re: Transformed div in zone
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.
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>
Re: Transformed div in zone
Thank you, but I have tried this with no resultVictoria_La wrote:Code: Select all
<div id="a_wrapper"> <div id="a" style="transform: ..."></div> </div>
- Victoria_La
- Posts: 620
- Joined: 28 December 2015, 20:55
Re: Transformed div in zone
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?
Re: Transformed div in zone
No, with css
my div is set like this:
transform is applied with add class
and then put into Zone
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..
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');
}
Code: Select all
.pawn.small{
transform: scale(0.5);
}
Code: Select all
this.myZone.placeInZone( 'pawn_'+i);
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
- Posts: 620
- Joined: 28 December 2015, 20:55
Re: Transformed div in zone
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
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>
Re: Transformed div in zone
No, not working in the Zone, div behave like the original one. Using background-size and percentage is much better approach.Victoria_La wrote: With div wrapper approach you should have set the size of the wrapper explicitly though
I was just curious if it can work, but I was not able to find solution.. Thanks anyway!