CODEWITHSUNDEEP
htmlcssflexbox
user1038814
user1038814

Reputation: 9667

Div overlay the same size as the div

Hoping you can help. I have a div which acts as a button. When clicked, an overlay is displayed exactly over the clicked div. This overlay has a green border and a check mark. Now, the markup works fine when the div is only one row tall. If the length of the text increases, the overlay div appears shorter than the bottom div. Is there a way I can make the overlay the same size as the bottom div in a dynamic way, i.e dependent on the length of the text? Hope that makes sense.

.text-btn-bg {
    background:#2ecc71;
    height:100%;
    width:100%;
    margin:0 auto;
    padding:0;
}
.text-btn {
    display:flex;
    height:100%;
    color:#fff;
    margin:0;
    padding:0;
    cursor:pointer;
    border:6px solid #3498db;
    -webkit-transition:-webkit-transform .07s ease-out;
    -moz-transition:-moz-transform .07s ease-out;
    -o-transition:-o-transform .07s ease-out;
    transition:transform .07s ease-out;
}
.text-btn.txt-btn1, .text-btn.txt-btn2, .text-btn.txt-btn3, .text-btn.txt-btn4, .text-btn.txt-btn5, .text-btn.txt-btn6 {
    background-color:#fff;
    color:#3498db;
}
h5.h5-text-btn {
    vertical-align:middle;
    display:table-cell;
    padding:10px 30px;
    margin:auto;
    font-weight:600;
}
.text-btn.ico-btn-check-overlay {
    background-color: rgba(255, 255, 255, .8);
    border-color: #1abc9c;
  height:73px;
 margin-top: -50px;
}
<div class="text-btn-bg">
                <div class="text-btn txt-btn1">
                    <h5 class="h5-text-btn">The quick brown fox jumps over the chickens and then runs off into the distance where he bumps into a badger.</h5>
                </div>
               
                <div class="text-btn txt-btn1 ico-btn-check-overlay option-choice-check-overlay" style="display: flex;">
                    <span class="icon-checkmark text-checkmark"></span>
                </div>
            
            </div>

Upvotes: 1

Views: 536

Answers (1)

isherwood
isherwood

Reputation: 61083

Two things simplify and resolve your issue: Box sizing and absolute positioning.

Fiddle 

* {
    box-sizing: border-box; /* include padding and borders in size */
}
.text-btn-bg {
    position: relative; /* needed for child positioning */
    background: #2ecc71;
    height: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

.text-btn {
    display: flex;
    height: 100%;
    color: #fff;
    margin: 0;
    padding: 0;
    cursor: pointer;
    border: 6px solid #3498db;
    -webkit-transition: -webkit-transform .07s ease-out;
    -moz-transition: -moz-transform .07s ease-out;
    -o-transition: -o-transform .07s ease-out;
    transition: transform .07s ease-out;
}

.text-btn.txt-btn1,
.text-btn.txt-btn2,
.text-btn.txt-btn3,
.text-btn.txt-btn4,
.text-btn.txt-btn5,
.text-btn.txt-btn6 {
    background-color: #fff;
    color: #3498db;
}

h5.h5-text-btn {
    vertical-align: middle;
    display: table-cell;
    padding: 10px 30px;
    margin: auto;
    font-weight: 600;
}

.text-btn.ico-btn-check-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 255, 255, .8);
    border-color: #1abc9c;
}
<div class="text-btn-bg">
    <div class="text-btn txt-btn1">
        <h5 class="h5-text-btn">The quick brown fox jumps over the chickens and then runs off into the distance where he bumps into a badger. The quick brown fox jumps over the chickens and then runs off into the distance where he bumps into a badger. The quick brown fox jumps over the chickens and then runs off into the distance where he bumps into a badger.</h5>
    </div>

    <div class="text-btn txt-btn1 ico-btn-check-overlay option-choice-check-overlay" style="display: flex;">
        <span class="icon-checkmark text-checkmark"></span>
    </div>
</div>

Upvotes: 2

Related Questions