CODEWITHSUNDEEP
htmlcss
Shnick
Shnick

Reputation: 1391

Maintain container height of dynamic content

I have a container with content. The container's width is fixed but its height is determined by its inner content.

Initially, the content of the container causes the container to be a particular height. I then want to shrink the inner elements content while maintaining the original height of the container.

In the snippet below, my goal is to maintain the initial height of the red box while still shrinking the font-size of the inner content.

function changeSize() {
  document.querySelector('.box').classList.add('active');
}
.container {
  border: 1px solid red;
  width: 30%;
}

.box {
  background: lime;
  transition: font-size 1s linear;
}

.box.active {
  font-size: 5px;
}
<div class="container">
  <p class="box">This is some text which changes size and causes the container to change height.</p>
</div>

<button onclick="changeSize()">Change text size</button>

At the moment, the red-box shrinks with the inner content, whereas I want it to remain at its initial height.

I know I can give the container (ie: red box) a fixed height, but I want its height to be determined by the initial height of its inner contents.

Is there anyway to use CSS to maintain the initial height of the container while also being able to change the size of the child element? I tried adding a wrapper element to the content but wasn't too sure where to go from there.

Upvotes: 2

Views: 1181

Answers (3)

C3roe
C3roe

Reputation: 96241

my goal is to maintain the initial height of the red box while still shrinking the font-size of the inner content.

Perhaps a better idea, to apply a transform: scale(…), rather than to manipulate the font-size.

This will scale the whole element, not just reduce the font-size, that usually looks smoother to begin with - and transforming an element, leaves the space it originally occupied, reserved - so your container element will not shrink in height as well.

Upvotes: 2

Avinash Dalvi
Avinash Dalvi

Reputation: 9301

Use min-height to set initial height. you can change height in script.

var innerContent = document.getElementsByClassName("box");
console.log(innerContent[0].clientHeight);

var container = document.getElementsByClassName("container"); 
console.log(container);
container[0].style.minHeight = innerContent[0].clientHeight + 40 + "px";

function changeSize() {
  document.querySelector('.box').classList.add('active');

}
.container {
  border: 1px solid red;
  width: 30%; 
}

.box {
  background: lime;
  transition: font-size 1s linear;
}

.box.active {
  font-size: 5px;
}
<div class="container">
  <p class="box">This is some text which changes size and causes the container to change height.This is some text which changes size and causes the container to change height.</p>
</div>

<button onclick="changeSize()">Change text size</button>

Upvotes: 1

Will
Will

Reputation: 1193

Get the height of the box and set it before changing the font. Make sure the margins are fixed too.

JS:

function changeSize() {
    var box = document.querySelector('.box');
    var height = box.offsetHeight;
  box.style.height = height + "px";
  document.querySelector('.box').classList.add('active');
}

CSS:

.container {
  border: 1px solid red;
  width: 30%;
}

.box {
  background: lime;
  transition: font-size 1s linear;
  margin: 10px;
}

.box.active {
  font-size: 5px;
}

Example: https://jsfiddle.net/ufgo5prv/

Upvotes: 2

Related Questions