The size of the message box should depend on the size of the message in jQuery
I want a div element to resize it based on the size of the text from <span id="dykSelectedReadMore">
.
<div class="flipper-back">
<a href="#" class="js-flipper-flip flipper-close"></a>
<div class="pad-box">
<h3 class="colored">Did you know</h3>
<div class="pad-30-0-0">
<b><span id="dykSelectedIssue">som text</span></b>
<br><br>
<span id="dykSelectedReadMore">...e-identities by 2025. Estonia introduced e-residency in 2014. Non-residents can get ID certificates with the functionality of Estonian ID card. This allows them to start using Estonian digital services from anywhere on Earth. E-residency is attracting entrepreneurs needing an investment account in the European Union, and is bringing more customers to Estonian companies and more capital into the country economy.</span>
</div>
</div>
source to share
I think you shouldn't be using Javascript, use CSS instead. This problem occurs when a div contains floating elements, cannot calculate its correct height (because it does not account for the height of those elements).
Following the easiest and fastest solution.
Start adding this CSS code:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
(source CSS-Tricks )
Then apply this class to flipper-back
div or pad-box
. Depends on witch <div>
contains floating elements.
eg. <div class="flipper-back clearfix">
source to share