I have two elements, and I want the second one to stick to the first one, so when the screen size is changing, the second element keep the same position from the first one.
var bubbleBtn = document.getElementsByClassName('qkb-bubble-btn ')[0];
var badge = document.getElementsByClassName('badge ')[0];
var rect = bubbleBtn.getBoundingClientRect();
badge.style.left = (rect.left+30)+'px';
badge.style.top = (rect.top-20) +'px';.badge {
position: absolute;
padding: 5px 10px;
border-radius: 50%;
background: red;
color: white;
}
.qkb-bubble-btn {
margin-top: 100px;
background-color: #FF7756 !important;
} <div>
<button class="qkb-bubble-btn">test</button>
<span class="badge">3</span>
</div>I don't know how to show my problem in the snippet but basically the whole app is reponsive so the bubble button is moving when the screen is resized and I want the badge to always be at this position from the button.
Is it possible only using CSS ? or should I trigger my JS code everytime the screen is resized ?
In your position I'd prefer to go css only setting the button position to relative and adding a css rule defining an :after element being your icon positioned absolute.
The side effect is that the content will need to be set the css way.
In this new edited demo I added the chance to specificy content addressing the attribute data-number and added a class to the rule so that it will show the bubble only if such class is present.
.qkb-bubble-btn {
position: relative;
background-color: #FF7756 !important;
}
.qkb-bubble-btn.showbubble:after {
position: absolute;
right:-25px;
top:-20px;
content: attr(data-number);
padding: 5px 10px;
border-radius: 50%;
background: red;
color: white;
}<div style="padding: 25px;">
<button class="qkb-bubble-btn showbubble" data-number="3">test (showing)</button>
<br>
<button class="qkb-bubble-btn">test (hiding)</button>
</div>The parent div should have position: relative and display: inline-block to relate the position and to give width equal to button.
.badge-wrapper{
position: relative;
margin-top: 100px;
display: inline-block
}
.badge {
position: absolute;
padding: 5px 10px;
border-radius: 50%;
background: red;
color: white;
right: -20px;
top: -20px;
}
.qkb-bubble-btn {
background-color: #FF7756 !important;
}<div class="badge-wrapper">
<button class="qkb-bubble-btn">test</button>
<span class="badge">3</span>
</div>Just update your code as follows this should help you.
.container{
position: relative;
}
.badge {
position: absolute;
margin-left:20px;
padding: 5px 10px;
border-radius: 50%;
background: red;
color: white;
}
.qkb-bubble-btn {
position: absolute;
margin-top: 20px;
background-color: #FF7756 !important;
}<div class="container">
<button class="qkb-bubble-btn">test</button>
<span class="badge">3</span>
</div>You don't need the Javascript code for this.