CODEWITHSUNDEEP
javascriptcssreactjs
iphonic
iphonic

Reputation: 12719

REACT - Child position with respect of scale of parent

I have a situation, where I have a parent div in which there can be any number of children divs, now I am applying scale on the parent div, so since the scale is applied on parent it looks that the child element is displacing from its position, I want the children divs to follow parent scale how to manage this situation, here are some portion of my code..

<div className="image-viewer">
   <div className="image-wrapper">
      <div class="zoom-2 image-outer">
        <img class="map-image" src="map.png"/>
        <div class="booth" style="left: 617px; top: 178px;">&nbsp;</div>
        <div class="booth" style="left: 735px; top: 160px;">&nbsp;</div>
      </div>
   </div>
</div>

In the above code the child elements have there left and top defined dynamically by mouse click position on map image. I have four predefined zoom levels from css which I am supplying dynamically on Zoom In/Out buttons.

Below are my css 

.image-viewer .image-wrapper {
  position: relative;
  width: 92vw;
  height: 92vh;
  margin: 4vh 4vw;
  overflow: hidden;
}
.image-viewer .image-outer {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
  transition: all .35s ease;
  -webkit-transition: all .35s ease;
}

.image-viewer .image-outer .map-image {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
  width: auto !important;
  height: auto !important;
  background-size: contain!important;
  background-position: center!important;
  background-repeat: no-repeat !important;
  transform: scale3d(1, 1, 1);
  -webkit-transform: scale3d(1, 1, 1);
  transition: all .4s ease;
  -webkit-transition: all .4s ease;
  animation: image-fade-in 0.4s ease;
  -webkit-animation: image-fade-in 0.4s ease;
}
.image-viewer .image-outer.zoom-1 {
  cursor: default;
}
.image-viewer .image-outer.zoom-2 .map-image {
  transform: scale3d(1.5, 1.5, 1);
  -webkit-transform: scale3d(1.5, 1.5, 1);
}
.image-viewer .image-outer.zoom-3 .map-image {
  transform: scale3d(2, 2, 1);
  -webkit-transform: scale3d(2, 2, 1);
}
.image-viewer .image-outer.zoom-4 .map-image {
  transform: scale3d(2.5, 2.5, 1);
  -webkit-transform: scale3d(2.5, 2.5, 1);
}
.image-viewer .image-outer.zoom-5 .map-image {
  transform: scale3d(3, 3, 1);
  -webkit-transform: scale3d(3, 3, 1);
}

.booth{
  width:9px;
  height:9px;
  border-color:white;
  border-width:1px;
  border-style:solid;
  position:absolute;
  z-index:999;
  background-color: red;
  transition: all .2s ease-in-out;
}

.booth:hover{
  cursor: pointer;
  transform: scale(2.0);
}

Here is my jsFiddle - https://jsfiddle.net/veda_in/o2qLt4q8/33/

Upvotes: 0

Views: 604

Answers (1)

ramesh sharma
ramesh sharma

Reputation: 254

Just change this.

.image-viewer .image-outer.zoom-2 .map-image {
  transform: scale3d(1.5, 1.5, 1);
  -webkit-transform: scale3d(1.5, 1.5, 1);
}

to : 

.image-viewer .image-outer.zoom-2 {
  transform: scale3d(1.5, 1.5, 1);
  -webkit-transform: scale3d(1.5, 1.5, 1);
 }

The problem here is when you are scaling map image, image is scaling but class zoom-2 width is not scaling, which is container for both booth element and map image.

.image-viewer .image-outer {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
  transition: all .35s ease;
  -webkit-transition: all .35s ease;
 }

So either you scale zoom-2 div class or add zoom-2 class to map-image and define map-image relative.

Upvotes: 1

Related Questions