CODEWITHSUNDEEP
htmlcss
MaximPro
MaximPro

Reputation: 532

Transforming the content inside the container

The problem is that when using the property the transform parent element ignores the increase in the size of the child element.

Example 1: Child container using width and height

.main {
  display: inline-flex;
  background: green;
  padding: 10px;
}

.element {
  display: block;
  background: red;
  width: 100px;
  height: 100px;
}
<div class="main">
  <div class="element"></div>
</div>

Example 2: Child container using transform

.main {
  display: inline-flex;
  background: green;
  padding: 10px;
}

.element {
  display: block;
  background: red;
  width: 100px;
  height: 100px;
  transform: scale(1, 2);
}
<div class="main">
  <div class="element"></div>
</div>

How to make it take transform consider the parent container?

Upvotes: 0

Views: 181

Answers (1)

Alen.Toma
Alen.Toma

Reputation: 4870

Here is a solution using js. using jq will make the code much smaller though.

You could run this function to all transformed div

 document.querySelectorAll(".element").forEach((x)=>{
    var elPos = x.getBoundingClientRect();
    // make sure that the parent is at least as big as child
    x.parentElement.style.minHeight  = elPos.height +"px";
    x.parentElement.style.minWidth = elPos.width + "px"; 
    // make sure that the top of the child start with the parent
     var elParentPos = x.parentElement.getBoundingClientRect();
     if (elPos.top < elParentPos.top)
      //  Math.abs((elPos.height / elPos.top) is the scale diffrent
     x.style.top = (elParentPos.top * Math.abs((elPos.height / elPos.top))) +"px"
    
 })
.main {
  display: inline-flex;
  background: green;
  padding: 10px;
}

.element {
  display: block;
  background: red;
  width: 100px;
  height: 100px;
  transform: scale(1, 2);
  position:relative;
}
<div class="main">
  <div class="element"></div>
</div>

Upvotes: 1

Related Questions