How do you keep a div size static even if the font size of the text inside it changes

user_1675976 0
Viewed 57

See my demo below. When you click the buttons, the font size changes and this is making the div box grow and shrink. I don't want the box size to change.

How do I prevent this?

$('#button-plus').click(() => {
 var currentFontSize = parseInt($('.main > span').css('font-size'));
 $('.main > span').css('font-size', currentFontSize + 5 + 'px');
});

$('#button-minus').click(() => {
 var currentFontSize = parseInt($('.main > span').css('font-size'));
 $('.main > span').css('font-size', (currentFontSize - 5) + 'px');
})
.main {
  text-align: center;
  width: 200px;
  max-width: 200px;
  overflow: overflow;
  padding: 10px 5px;
  border: 2px solid #bbb;
}

.main > span {
  font-size: 12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
  <span>Some Text</span>
</div>

<button id="button-plus">+</button>
<button id="button-minus">-</button>

css html javascript
3 Answers

It seems you are trying to create a fixed width and height for your div box. You can simply fix this by including a height to your .main class.

.main {
  text-align: center;
  width: 200px;
  height: 20px; // <-- specify a height.
  max-width: 200px;
  overflow: overflow;
  padding: 10px 5px;
  border: 2px solid #bbb;
}

.main > span {
  font-size: 12px;
}
user_38100240

Not totally clear what behavior you are expecting.

One approach might be take the current height on page load and apply it inline so it becomes fixed height using:

$('.main').height((_,curr) => curr)

Another alternative is using css flex box rules

$('#button-plus').click(() => {
 var currentFontSize = parseInt($('.main > span').css('font-size'));
 $('.main > span').css('font-size', currentFontSize + 5 + 'px');
});

$('#button-minus').click(() => {
 var currentFontSize = parseInt($('.main > span').css('font-size'));
 $('.main > span').css('font-size', (currentFontSize - 5) + 'px');
});

$('.main').height((_,curr) => curr)
.main {
  text-align: center;
  width: 200px;
  max-width: 200px;
  overflow: auto;
  padding: 10px 5px;
  border: 2px solid #bbb;
}

.main > span {
  font-size: 12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
  <span>Some Text</span>
</div>

<button id="button-plus">+</button>
<button id="button-minus">-</button>

user_11759660 
$('#button-plus').click(() => {
 var currentFontSize = parseInt($('.main > span').css('font-size'));
 $('.main > span').css('font-size', currentFontSize + 5 + 'px');
});

$('#button-minus').click(() => {
 var currentFontSize = parseInt($('.main > span').css('font-size'));
 $('.main > span').css('font-size', (currentFontSize - 5) + 'px');
})
.main {
  text-align: center;
  width: 200px;
  height: 400px;
  overflow: overflow;
  padding: 10px 5px;
  border: 2px solid #bbb;
}

.main > span {
  font-size: 12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
  <span>Some Text</span>
</div>

<button id="button-plus">+</button>
<button id="button-minus">-</button>
user_138170700
Related