Achieving a scrollable div with ng-repeat

I have implemented ng-repeat to showcase some messages, and I am attempting to create a scrollable "message_area" as the messages overflow naturally over time. However, my current code is not delivering the desired outcome.

<div class="main_area">

  <div id = "message_area" ng-repeat = "message in selected_conversation_object.messages.slice().reverse()">
    <div class="message_container" ng-if = "message.sender != me._id">
      <div class="message_received">{{message.message}}</div>
    </div>
    <div class="message_container" ng-if = "message.sender == me._id">
      <div class="message_sent_by_me">{{message.message}}</div>
    </div>
  </div>

</div>

.main_area {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 325px;
  right: 0;
  height: 100%;
  background: white;
}

#message_area {
  position: relative;
  overflow-y: scroll;
}

.message_container {
  position: relative;
  width: 100%;
  height: 30px;
}

.message_received {
}

.message_sent_by_me {
  position: relative;
  background-color: #0084FF;
  border-radius: 5px;
  width: 100px;
  color: white;
  float: right;
}

I am puzzled by the reasons for my code not working correctly.

Your thoughts and recommendations would be very helpful.

Answer №1

To ensure proper display, make sure to specify a min-height in the CSS for the #message_area element.

#message_area {
   position: relative;
   min-height: 50px; // Don't forget this.
   overflow-y: scroll;
}

Answer №2

To enable scrolling within your .main_area, utilize the scroll feature. Whenever the content exceeds the specified height, a scrollbar will appear on the vertical axis.

.main_area {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 325px;
  right: 0;
  height: 100%;
  background: white;
  **overflow-y: scroll;**
}

View the live example on Plunker.

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

Using Vuejs to dynamically render raw HTML links as <router-link> elements

Hey there, I'm just getting started with VueJS and I've been doing some interesting experiments. I created a backend service using Python/Flask that provides me with a string of HTML code containing many tags. My goal is to render this HTML insid ...

Inquiring about the functionality of vertical and horizontal scrolling in jQuery localscroll

I recently finished building a webpage at . On this page, I have a set of main links along with corresponding sublinks. Currently, clicking on a main link causes the content to scroll vertically, while clicking on a sublink like Blue Inner Link 1 results i ...

What could be causing the Vue.js image component to malfunction?

I am having an issue. I want to create a Vue.js Component. This component displays an image, similar to the <img> tag. If you are familiar with the <img> tag, this question should be easy for you to understand. Here is the code I have: props ...

I'm having trouble with my AngularJS Spinner directive

Check out this simple directive I created to display a spinner on my button while something is happening remotely: http://plnkr.co/edit/rAJ4X7A3iidmqUD2M63A?p=preview Here's the html: <!DOCTYPE html> <html ng-app="app"> <head> ...

Issues with zoom functionality not functioning properly within IE11

I am currently developing an application with Angular that is designed to be compatible with tablets and touch-enabled devices. One of the key features I want to implement is the ability for users to zoom/scale up the app, especially for those with visual ...

Creating a dynamic model in an AngularJS directive using a JSON object

I am struggling with utilizing a json file that contains objects storing properties for a directive. Despite my attempts, I cannot seem to access the json obj model value within the directive. Does anyone have any insights into what I might be doing incor ...

Having trouble retrieving state parameters when trying to launch a modal in AngularJS

When the "view detail" link is clicked, I wanted to open a modal for a detailed view of a specific user. However, I encountered an issue where I couldn't retrieve the user ID in the resolve attribute of $uibModal.open(). Strangely enough, the ID is av ...

OpenLayers had trouble handling the mouse event in Ionic

I am attempting to handle a double mouse click event on OpenStreetMaps by utilizing the code below: const map = new OpenLayers.Map("basicMap"); const mapnik = new OpenLayers.Layer.OSM(); const fromProjection = new OpenLayers.Projection("EPSG:4326"); // ...

Add the HTML content to $rootElement if $rootElement refers to the window.document

My application is initialized using angular.bootstrap(document, [app.name]); therefore $rootElement is passed as angular.element(document). However, when I try to do $rootElement.append("<div>hi</div>"), it does not have any effect. Instead ...

Using jq and node.js to translate AWS EC2 tags

Seeking assistance with transforming this array of EC2 tags using jq and node.js: [ { Key: 'Name', Value: 'xxx' }, { Key: 'role', Value: 'yyy' } ] I want to transform it to: { name : 'xxx', ro ...

relative font sizing based on parent element

My container is flexible in size, adjusting based on how the user moves elements around the screen. Inside this container, there is both an image and text. The image takes up 80% of the height of the container while the text should take up the remaining ...

Creating CSS-in-JS Components in React JS without External Stylesheet interference

import React, { Component } from "react"; import './navbar.css' class NavBar extends Component { render() { return ( <div> navbar content </div> ); } } export default NavBar; If I were to ...

Guide on retrieving data parameter on the receiving page from Ajax response call

I am working on dynamically opening a page using Ajax to avoid refreshing the browser. The page opens and runs scripts on the destination page, but before running the script, I need to retrieve parameters similar to request.querystring in JavaScript. Belo ...

Can HTML be injected into a Knockout custom element?

I am currently developing a custom knockout element and I would like to inject some HTML into it, similar to what can be done with polymer. My goal is to achieve something along the lines of: ko.components.register('hello-world', { template ...

The result from the AngularJs promise is coming back as undefined

I am facing an issue while trying to implement the login function of my AuthService factory in conjunction with my AuthLoginController controller. The problem arises when the User.login function is triggered with incorrect email and password details, causi ...

Discovering MaterialUI breakpoints within CSS styling

Working on a create-react-app project, I have incorporated material-ui 1.x and customized the theme with unique breakpoints... import { createMuiTheme } from '@material-ui/core/styles'; let customTheme = createMuiTheme({ breakpoints:{ val ...

Remove Specific HTML Tags Using Free Pascal

Is it possible to exclude a specific HTML tag from a string? I am looking to remove tags that start with <img>. However, all the content within <img ...> should be deleted as well. This is necessary because I need to eliminate images from the ...

Can CSS be used to target HTML elements that come after another regardless of their position in the document?

Is there a way to style any <h1> element(s) that come after an <h2> element using only CSS? I've searched through countless pages of CSS documentation, trying to figure out if it's possible to target specific elements that appear AFT ...

Setting the ng-model variable to the parent controller within the scope of nested controllers

I am facing a situation where I have one ng-controller nested within another controller's scope. My goal is to set the scope variable in the nested controller to be accessible in the parent controller as well. Below is a snippet of the code: <div ...

Ensure that you wait for all asynchronous $http requests to finish in AngularJS before continuing

I am facing a challenge with a page that generates a varying number of $http requests based on the length of a certain variable. I aim to update the scope with the data only after all requests have been completed. Without relying on jQuery for this project ...