The dynamic addition of divs to the HTML body is causing them to overlap

Check out this functional plunker that is nearly complete. The current issue I am facing is with the chat divs being dynamically added to the body using $compile, but they all have the same CSS class and end up overlapping each other, like so:

 .chat-window{
            bottom:0;
            position:fixed;
            float:right;
            margin-left:10px;
  }

Can anyone suggest css modifications that would make them open side-by-side instead of overlapping?

I would appreciate a little assistance with this. Thank you.

cssangularjs

Answer №1

To improve the layout of the chat windows, consider adding a wrapper around them and adjusting their positions using floating elements. You can try implementing something like the following (code is untested):

1. Utilizing a fixed wrapper with floating children

HTML

<div class="chat-wrapper">
   <div class="chat-window"></div>
   <div class="chat-window"></div>
   <div class="chat-window"></div>
</div>

CSS

.chat-wrapper {
  position: fixed;
  bottom: 0;
}

.chat-window {
  position: relative;
  float: left;
  margin-left: 10px;
}

2. Consider utilizing a Flexbox solution

CSS

.chat-wrapper {
   position: fixed; 
   bottom: 0;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   flex-direction: row;
}

Answer №2

Feel free to check out this demo that calculates the number of boxes and positions them accordingly.

var calculatePosition = function (boxNumber) {
            if (boxNumber > 0) {
                return (boxNumber * 410) + 'px';
            } else {
                return 0;
    }
};

You can add it like this: 

angular.element(document.getElementById('main-html-body')).append(
      $compile("<div chat-box \n\
                    id=" + scope.user + "\n\
                     class='row chat-window col-xs-5 col-md-3' \n\
                       incoming-msg='incomingMsg' \n\
                         open-chat-user-list='openChatUserList' \n\
                            user='user' \n\
                           count='count' style='position: fixed;bottom:0; right: " + calculatePosition(scope.count.p) + "'></div>"
         )(scope)
  )

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

Navigate through an overflowing element in react/next

I have a component with a fixed width and overflow-x-auto. I want to hide the scroll bar and replace it with arrow buttons for scrolling left and right. How can I add this functionality to my component? Here is the code for my component: <div className ...

javascriptcssreactjsnext.jstailwind-css

Enhancing button images with gradient effects on hover

I'm currently working on adding a color gradient effect to a PNG graphic used as a button. I specifically want the color gradient to appear only when the user hovers over the image, and not just for background images like most solutions seem to provid ...

htmlcss

Guide on sending a personalized email to multiple recipients using office.js

Is it possible to send individual emails when using office.js in Outlook for mail delivery? For instance, if there are 5 recipients, can the email be sent so that each recipient only sees their own email and not others'? This is unrelated to BCC fun ...

angularjsoffice-jsoutlook-web-addins

"Exploring the World of Mobile Development and Screen Size

Currently, I am in the process of creating a basic mobile website that can be accessed through a QR code leading to the page linked below. However, I have encountered an issue where viewing it on my Android or Apple phone results in excess width. Any advic ...

htmlcssmobilecross-browser

Is there a way to efficiently manage multiple modules in AngularJS? I've put in a lot of effort, but while one module is functioning properly, the

angular .module('ApplicationOne',[]) .controller('myControllerOne', function($scope){ $scope.name = "Luther"; $scope.fname = "Martin"; $scope.ed = "B.TECH"; }); angular .module('App2&apos ...

javascriptangularjs

Experiencing difficulties positioning svg text path in the center using CSS on desktop devices

I've looked into other SVG text questions, but I'm struggling to understand my mistake. Currently, I'm working on a live site at and implementing the following code: <svg class="svg-width desktop" style="margin:auto"> <path ...

csssvg

Enhancing user experience with CSS dropdown menu animations

I've been working on adding a dropdown transition to my menu, but I can't seem to get it right. Can anyone point out where I'm going wrong or what needs to be added for the transition effect on the dropdown menu? Here is the CSS and HTML cod ...

htmlcsstransition

Unable to get CSS First Child Pseudo Element to Work Properly

I'm having trouble with this code in CSS and would appreciate any help. I can't figure out why the margin-left won't apply to the first i element. Below is the CSS I'm using: header.site-header .right_side_menu i:first-child { marg ...

htmlcsscss-selectorspseudo-element

What methods can be used to test scss subclasses within an Angular environment?

Exploring different background colors in various environments is a task I want to undertake. The environments include bmw, audi, and vw, with each environment having its own unique background color. Need help writing an Angular test for this? How can I mod ...

cssangulartypescriptunit-testingangular-test

Sorting data in AngularJS using the OrderBy filter in ascending

I am using ng-repeat in my code: <label ng-repeat="atp in Keywords | unique:'atp'"> {{atp}} </label> The values in atp are as follows: client animal zoo boat I want the final output to be: animal boat client zoo Thank you for ...

javascriptangularjsangularjs-orderby

Unable to remove the necessary row with Angular.js/JavaScript

I am facing an issue in deleting the correct row from an array using Angular.js. Below is the code snippet that I am working with: <tr ng-repeat="d in days"> <td>{{d.day_name}}</td> <td> <table ...

javascriptangularjs

Differentiating Between Arrays and Objects in AngularJS ng-repeat

When using ng-repeat to display data in a View from an endpoint in the form of an atom feed, I encountered an issue. The endpoint returns JSON if the Accept header is 'application/json', but when there is only one entry in the atom response, the ...

angularjsarraysangularjs-ng-repeatjson

What is a method to resize an SVG path to a specific pixel size without altering any of the SVG attributes?

Is it possible to adjust the size of a <path> to fit a specific px dimension by simply altering the attributes of the path itself? Within an SVG, I have a carrot symbol represented by a <path>. <svg height="600" width="400"> <p ...

htmlcsssvg

The Div overlay vanishes once the Javascript function is finished running

Initially, take a look at this fiddle: http://jsfiddle.net/ribbs2521/Q7C3m/1/ My attempt to run JS on the fiddle has been unsuccessful, but all my code is present there, so we should be fine. I was creating my own custom image viewer, and everything was ...

javascripthtmlcss

Take off the wrapping from the package

I need help with my code on how to remove the wrapper span tag without removing the text. <ul> <li> <a href="#"> </a> <ul> <li> <a href="#"> ...

jquerycss

Steps for transferring Children to the Angular Directive correctly

I'm having trouble passing FormGroups that are inside children components to my directive. Why are they not being passed correctly? I attempted to use both ViewChildren and ContentChildren, but the result returned is undefined. <div block="ta ...

angularangularjsangular-reactive-formsformgroupsviewchild

Customize Cell Styling with Bootstrap Full Calendar CSS

I am attempting to implement a Bootstrap calendar feature where cells are colored green if the timestamp is greater than today's date. This can be achieved by: $checkTime > $today cell.css = green background I came across this code snippet on St ...

javascripthtmlcsstwitter-bootstrap

MAC Safari is not registering input fields

I'm experiencing a small issue with a form that has two input fields for indicating time (in the format HH:mm) that are very close together, like this: Here is the HTML code snippet: <label> <span>Hour*</span> <input typ ...

htmlcsssafari

Is there a way to make a glossy `selectInput()` extend beyond a `bslib::navset_card_pill()`?

The dilemma: My issue is that the selectInput() in my code gets cut off by the lower border of the card: library(shiny) # Version 1.7.4 library(bslib) # Version 0.5.0 ui <- page_fluid( navset_card_pill(nav_panel( title = "No overflow :(&quo ...

htmlcssrshinybslib

Struggling with IE7 compatibility issues regarding tables inside a div? Seeking a reliable resource to gain insights and strategies for effectively resolving IE7 problems

I am currently in the process of revamping this website: but I am facing a challenge with repeating a gradient within a div (cnews). The problem arises when the gradient is repeated on IE7, as it distorts the color. It appears as though the blue in the im ...

htmlcssinternet-explorer-7