Position the end of a div to the left side of the container with this technique

I have encountered an issue while trying to showcase a floating bubble with a message located on the left side of the bubble. Despite using absolute positioning and setting a fixed value for the left property, whenever the message text changes, the width of the div fluctuates causing it to move away from the bubble.

Could someone guide me on how I can position it in such a way that the floating message remains aligned to the left of the bubble no matter the length of the text?

Below is the code snippet:

var floatingMessage = document.querySelector("#floating-message");
var toggleBtn = document.querySelector("#toggleMessage");
var messages = ["Hello There 👋, chat with us!", "Hello There 👋", "Welcome!", "blah blah", "looooooooooooooooooooonoooooooooooooog text"];
var currentIndex = 0;
toggleBtn.addEventListener('click', function() {
    currentIndex = (currentIndex + 1) % messages.length;
    floatingMessage.textContent = messages[currentIndex];
});
body {
  font-family: calibri;
  background-color: lightgray;
}
#floating-bubble {
    background-color: teal;
    position: fixed;
    bottom: 0;
    right: 0;
    margin-bottom: 20px;
    margin-right: 20px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    box-shadow: 0 0 20px rgba(0,0,0,.5);
    transition: box-shadow .5s ease-in-out;
    cursor: pointer;
    z-index: 2147483645;
    border-bottom-right-radius: 0;
    background-image: url('https://cdn0.iconfinder.com/data/icons/thin-communication-messaging/57/thin-036_bubble_comment_chat_message-512.png');
    background-position: center;
    background-size: 80%;
    background-repeat: no-repeat;
    border-bottom-right-radius: 0;
}
#floating-message {
  background: #3a96dd;
    padding: 5px;
    left: -180px;
    transition: none;
    animation-duration: .5s;
    animation-name: slidein,wiggle;
    animation-iteration-count: 1,4;
    animation-direction: normal,alternate;
    animation-timing-function: ease-in,ease-in-out;
    border-radius: 10px;
    top: 10px;
    font-size: 14px;
    box-shadow: 0 0 10px #000;
    position: absolute;
    color: #fff;
    font-family: Calibri, sans-serif;
}
<button id="toggleMessage">
Toggle Message
</button>
<div id="floating-bubble">
<div id="floating-message">Hello There 👋, chat with us!</div>
</div>

Fiddle

htmlcss

Answer â„–1

If you want to make the message stick to the end of the screen, you can simply adjust the style for #floating-message. Set right: 60px (use 60px as 50px is already taken by #floating-bubble) and remove the left attribute. This should prevent the message from wrapping into two lines. Adding white-space: nowrap will help ensure that the message stays on a single line.

I also found setting z-index to 2147483645 in #floating-bubble unnecessary. So I changed it to 2, just in case some other element has a z-index of 1.

var floatingMessage = document.querySelector("#floating-message");
var toggleBtn = document.querySelector("#toggleMessage");
var messages = ["Hello There 👋, chat with us!", "Hello There 👋", "Welcome!", "blah blah", "looooooooooooooooooooonoooooooooooooog text"];
var currentIndex = 0;
toggleBtn.addEventListener('click', function() {
    currentIndex = (currentIndex + 1) % messages.length;
    floatingMessage.textContent = messages[currentIndex];
});
body {
  font-family: calibri;
  background-color: lightgray;
}
#floating-bubble {
    background-color: teal;
    position: fixed;
    bottom: 0;
    right: 0;
    margin-bottom: 20px;
    margin-right: 20px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    box-shadow: 0 0 20px rgba(0,0,0,.5);
    transition: box-shadow .5s ease-in-out;
    cursor: pointer;
    z-index: 2;
    border-bottom-right-radius: 0;
    background-image: url('https://cdn0.iconfinder.com/data/icons/thin-communication-messaging/57/thin-036_bubble_comment_chat_message-512.png');
    background-position: center;
    background-size: 80%;
    background-repeat: no-repeat;
    border-bottom-right-radius: 0;
}
#floating-message {
  background: #3a96dd;
    padding: 5px;
    right: 60px;    /* Added right over here, so that message stick to the end of screen */
    white-space: nowrap; /* Added this over here, so that it forces the message to be in single line */
    transition: none;
    animation-duration: .5s;
    animation-name: slidein,wiggle;
    animation-iteration-count: 1,4;
    animation-direction: normal,alternate;
    animation-timing-function: ease-in,ease-in-out;
    border-radius: 10px;
    top: 10px;
    font-size: 14px;
    box-shadow: 0 0 10px #000;
    position: absolute;
    color: #fff;
    font-family: Calibri, sans-serif;
}
<button id="toggleMessage">
Toggle Message
</button>
<div id="floating-bubble">
<div id="floating-message">Hello There 👋, chat with us!</div>
</div>

Answer â„–2

For a different approach, consider using position: fixed; instead of position: absolute; for the element with the ID #floating-message, similar to how it's implemented in #floating-bubble. Set the desired values for right and bottom.

Take a look at this example:

var floatingMessage = document.querySelector("#floating-message");
var toggleBtn = document.querySelector("#toggleMessage");
var messages = ["Hello There 👋, chat with us!", "Hello There 👋", "Welcome!", "blah blah", "looooooooooooooooooooonoooooooooooooog text"];
var currentIndex = 0;
toggleBtn.addEventListener('click', function() {
    currentIndex = (currentIndex + 1) % messages.length;
    floatingMessage.textContent = messages[currentIndex];
});
body {
  font-family: calibri;
  background-color: lightgray;
}
#floating-bubble {
    background-color: teal;
    position: fixed;
    bottom: 0;
    right: 0;
    margin-bottom: 20px;
    margin-right: 20px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    box-shadow: 0 0 20px rgba(0,0,0,.5);
    transition: box-shadow .5s ease-in-out;
    cursor: pointer;
    z-index: 2147483645;
    border-bottom-right-radius: 0;
    background-image: url('https://cdn0.iconfinder.com/data/icons/thin-communication-messaging/57/thin-036_bubble_comment_chat_message-512.png');
    background-position: center;
    background-size: 80%;
    background-repeat: no-repeat;
    border-bottom-right-radius: 0;
}
#floating-message {
    background: #3a96dd;
    position: fixed;
    bottom: 0;
    right: 0;
    margin-bottom: 30px;
    margin-right: 80px;
    border-radius: 10px;
    box-shadow: 0 0 10px #000;
    padding: 5px;
    transition: none;
    animation-duration: .5s;
    animation-name: slidein,wiggle;
    animation-iteration-count: 1,4;
    animation-direction: normal,alternate;
    animation-timing-function: ease-in,ease-in-out;
    font-size: 14px;
    color: #fff;
    font-family: Calibri, sans-serif;
}
<button id="toggleMessage">
Toggle Message
</button>
<div id="floating-bubble">
<div id="floating-message">Hello There 👋, chat with us!</div>
</div>

Answer â„–3

To adjust the position of the message, simply update the left: -180px to right: 55px in the #floating-message class. This change will push the containing div towards the right side.

var floatingMessage = document.querySelector("#floating-message");
var toggleBtn = document.querySelector("#toggleMessage");
var messages = ["Hello There 👋, chat with us!", "Hello There 👋", "Welcome!", "blah blah", "looooooooooooooooooooonoooooooooooooog text"];
var currentIndex = 0;
toggleBtn.addEventListener('click', function() {
    currentIndex = (currentIndex + 1) % messages.length;
    floatingMessage.textContent = messages[currentIndex];
});
body {
  font-family: calibri;
  background-color: lightgray;
}
#floating-bubble {
    background-color: teal;
    position: fixed;
    bottom: 0;
    right: 0;
    margin-bottom: 20px;
    margin-right: 20px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    box-shadow: 0 0 20px rgba(0,0,0,.5);
    transition: box-shadow .5s ease-in-out;
    cursor: pointer;
    z-index: 2147483645;
    border-bottom-right-radius: 0;
    background-image: url('https://cdn0.iconfinder.com/data/icons/thin-communication-messaging/57/thin-036_bubble_comment_chat_message-512.png');
    background-position: center;
    background-size: 80%;
    background-repeat: no-repeat;
    border-bottom-right-radius: 0;
}
#floating-message {
  background: #3a96dd;
    padding: 5px;
    right: 55px;
    transition: none;
    animation-duration: .5s;
    animation-name: slidein,wiggle;
    animation-iteration-count: 1,4;
    animation-direction: normal,alternate;
    animation-timing-function: ease-in,ease-in-out;
    border-radius: 10px;
    top: 10px;
    font-size: 14px;
    box-shadow: 0 0 10px #000;
    position: absolute;
    color: #fff;
    font-family: Calibri, sans-serif;
}
<button id="toggleMessage">
Toggle Message
</button>
<div id="floating-bubble">
<div id="floating-message">Hello There 👋, chat with us!</div>
</div>

Answer â„–4

I suggest wrapping both elements in a single container and fixing its position. This will allow for easier alignment of the elements inside the container with more predictable behavior.

You can see the result here: https://jsfiddle.net/k2a49blv/

<button id="toggleNotification">
    Toggle Notification
</button>
<div class="notification-container">
  <div id="floating-notification">Hey, New message!</div>
  <div id="notification-bubble"></div>
</div>

.notification-container {
  display: flex;
  position: fixed;
  bottom: 0;
  right: 0;
}
#notification-bubble {
    background-color: cyan;
    margin-bottom: 20px;
    margin-right: 60px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    box-shadow: 0 0 20px rgba(0,0,0,.5);
    transition: box-shadow .5s ease-in-out;
    cursor: pointer;
    z-index: 2147483645;
    background-image: url('https://cdn0.iconfinder.com/data/icons/thin-communication-messaging/57/thin-036_bubble_comment_chat_message-512.png');
    background-position: center;
    background-size: 80%;
    background-repeat: no-repeat;
    border-bottom-right-radius: 0;
}
#floating-notification {
  margin-right: 15px;
  background: #3a96dd;
    padding: 5px;
    transition: none;
    animation-duration: .5s;
    animation-name: slidein,wiggle;
    animation-iteration-count: 1,4;
    animation-direction: normal,alternate;
    animation-timing-function: ease-in,ease-in-out;
    border-radius: 10px;
    font-size: 14px;
    box-shadow: 0 0 10px #000;
    color: #fff;
    font-family: Calibri, sans-serif;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can we incorporate modulo into the loop?

I have a JavaScript function with HTML code inside. I need the ".one-card" div to repeat four times within each ".row" div. The ".row" div is being repeated in a foreach loop. I want to check if the result of modulo (4) is not equal to zero, then display t ...

javascripthtmlmodulo

Bullet points colliding with one another

Is there a way to display an unordered list with list items in two rows and multiple columns without the bullet points overlapping? I have tried adjusting margins, but is there a more elegant solution to this issue? The requirement is to maintain the bul ...

htmlcssflexbox

The function for clicking is malfunctioning

I've been working with a table where I can dynamically add rows using the clone function, as shown below: new_row = $(table_id+' tbody > tr:last').clone(true).removeAttr('id').insertAfter(table_id+' tbody > tr:last&apos ...

jqueryhtmlclickonclick

Arranging divs with CSS positioning

I struggle with positioning divs, especially in this particular situation. I am attempting to position boxes in the following layout: _ ___ _ |_|| ||_| _ | | |_||___| Is there a way to avoid manually defining pixel positions for each box and ins ...

csshtml

Differences in layout design when using floats and display: table between Chrome and Firefox can affect the visual appearance

Try out this link on JS Fiddle: https://jsfiddle.net/7p81bnto/2/ Here's the HTML code: <body> <main> <div> <div style=" height: 50px; width: 200px; ...

htmlcssgoogle-chromefirefox

Troubleshooting Unresponsive Dropdown Menu Using JQuery

My attempt to integrate the Dropdown Menu feature into my Navbar using base.html and navbar.html files has hit a snag. Although the menu is visible, it remains non-responsive upon clicking. Despite my efforts to rectify the issue by referencing other resou ...

htmljquerybootstrap-4

What is the process for validating the CSS background-image URL using Javascript?

The concept here is to verify the URL of the CSS element's id (.boot). If the URL matches, which it does, then it should display "hello world." However, despite everything seeming correct, the expected behavior is not occurring, and the reason behind ...

javascriptcssif-statementbackground-image

Determining the widths of elements when floated in Opera 11.*

I'm currently facing an issue with the Opera 11.5 beta (although I suspect this applies to all Opera 11 versions) where a floated block-level element (an unordered list) is being assigned a random fixed width, causing the child elements to wrap - simi ...

csslayoutoperacss-float

Determine whether the string includes any character during keyup event

I'm currently working on implementing a live search feature on my website. I have managed to make it work where the input field and link title match, but it only matches complete words. I am wondering if there is a way to display results that contain ...

jqueryhtmlsearcheachcontains

cURL windows fail to show the HTML response

Is there a method to prevent the html response from being shown in the console? It's causing a delay in my project and I want to deactivate it. I typically employ curl Appreciate it ...

htmlwindowscurlconsole

Tips for implementing JS function in Angular for a Collapsible Sidebar in your component.ts file

I am attempting to collapse a pre-existing Sidebar within an Angular project. The Sidebar is currently set up in the app.component.html file, but I want to transform it into its own component. My goal is to incorporate the following JS function into the s ...

javascripthtmlangulartypescript

Target the CSS element with a specific class only if it is not the first child within its parent

In my coding project, I have created a div.container which contains multiple p elements. Some of these p elements have the class p.special. My goal is to select the p.special elements that are not positioned at the very top of the parent container (i.e., n ...

htmlcsscss-selectors

What is the best way to connect an HTML file to a controller in Angular.js?

When developing an app module using the MEAN stack with MVC, I created a folder named AppModules. Inside AppModules, there is a folder called search, which contains three subfolders: models, views, and controllers. I've written an HTML file in the vie ...

javascripthtmlangularjsmodel-view-controllermean-stack

What are some creative ways to enhance the appearance of a deactivated radio button?

In a table cell, I have a set of radio buttons with a background color that differs from the rest of the page. At times, based on another input, I need to disable certain radio buttons. When a radio button is disabled, its interior color blends with the t ...

cssradio-button

How can I detect a click event on an SVG element using JavaScript or jQuery?

Currently, I am developing a web application that utilizes SVG. However, I have encountered an issue: I am struggling to add a click event to each element within the SVG using jQuery. The problem arises when attempting to trigger the event; it seems like t ...

javascriptjqueryhtmlsvg

Is it possible for style sheets to malfunction due to the presence of the TITLE attribute on <link> tags?

We are currently involved in the process of upgrading an outdated corporate intranet. The challenge is that our users primarily rely on IE8 and IE9, while most of our sites were designed to function with compatibility for browsers between IE5 - IE9. While ...

htmlcsshyperlinktitle

Limit the y-axis on CanvasJS visualization

Is it possible to adjust the minimum and maximum values on the y-axis of the graph below: new CanvasJS.Chart(this.chartDivId, { zoomEnabled: true, //Interactive viewing: false for better performance animatio ...

javascripthtmlcss

Center nested rows vertically within an alert box using Bootstrap

Can anyone provide some insight into why the inner row is not vertically centered within its alert-box? I feel like it might have something to do with the nested row structure. Here is a link to the code: https://jsfiddle.net/d2pg4xta/ <div class=" ...

htmlcssbootstrap-4

The width property is not being passed down to the table

I'm experiencing difficulties with the scaling of my body content. When the page is initially opened, it scales to 100%. However, when I resize the screen to make it wider, the content gets bigger but when I try to make it smaller again, it remains a ...

htmlcssnetsuite

Using JQuery's .mouseover and .mouseout methods to modify font colors on a webpage

Hi there, I'm new to JQuery and trying to experiment with some basic functionalities. I have a simple navigation menu created using an unordered list, and I want to change the font color of the currently hovered list item using JQuery. However, I&apos ...

javascriptjqueryhtmlcssfonts