MD-List Equilibrium Elevation

Seeking a solution for implementing a simple chat using the md-list template. The issue arises when new items are added to the md-list, causing it to expand.

Desiring the list to behave similarly to other chat platforms, where the height remains constant regardless of the number of items, and allows users to scroll to view older messages.

Currently, the following CSS has been applied:

    md-list{
  overflow-y: scroll;
}

The chat container has also been set to a max-height value, however, the list continues to grow beyond the parent element's boundaries.

Initially, the parent and chat are set to 400px in height. Upon adding messages, the parent maintains the 400px height, while the chat expands with each new message.

How can this issue be resolved? Attempts to set max-height equal to the initial chat height have proven ineffective.

Any suggestions?

javascriptcssangularmaterial-designangular-material

Answer №1

Implement a fixed height class for the md-list component.

      <md-list class="fix-height">          
        <md-subheader class="md-no-sticky">Displaying 3-line items (with hover effect)</md-subheader>
        <md-list-item class="md-3-line" ng-repeat="item in todos" ng-click="null">
          <img ng-src="{{item.face}}?{{$index}}" class="md-avatar" alt="{{item.who}}">
          <div class="md-list-item-text" layout="column">
            <h3>{{ item.who }}</h3>
            <h4>{{ item.what }}</h4>
            <p>{{ item.notes }}</p>
          </div>
        </md-list-item> 
      </md-list>

CSS 

.fix-height{
  max-height:200px;
  height:200px;
}

View code on CodePen

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

What are the steps to integrate the quickstart of Gmail API into Angular 5 components?

I've made numerous attempts to successfully translate the following code: <!DOCTYPE html> <html> <head> <title>Gmail API Quickstart</title> <meta charset='utf-8' /> </head> <body& ...

angulargmail-api

Creating a function in a JavaScript module that can be exported to the window namespace

One of the goals of modules is to protect variables and functions defined inside from being accessed outside the script. However, if you want to export a specific function for global use, there are ways to accomplish this. Merely assigning it to the window ...

javascriptes6-modules

Utilize D3 to Rotate Text within an SVG in Circular Motion, Following by Self-rotation

In my visualization, the labels are arranged around the center of a circle by rotation. However, this results in the labels on the left side of the circle appearing upside down. Is there a way to rotate the labels on the left side independently after the i ...

javascriptd3.js

The combination of React and Redux with the utilization of combined reducers

Hey there, I'm currently utilizing thunks to retrieve data from my backend, but I'm a bit uncertain on how to implement it in my combined reducer. Here are my types: export const FETCH_SUCCESS = 'FETCH_SUCCESS'; export const FETCH_FAI ...

javascriptreactjsredux

Core-pages with polymer core have no set height limit

I am embarking on my first project using Polymer. I have implemented core-pages to facilitate navigation between different pages. However, I am facing an issue where the pages are not displaying with a white background-color as intended in the css. You ca ...

htmlcsspolymer

Transform HTML components into visual representations (on the server)

I am looking for a way to convert dynamic HTML elements into image files such as jpg or png. I do not want to capture a screenshot of a webpage or a static HTML file. My goal is to achieve something similar to the following, but executed on the server-sid ...

javascripthtmlnode.js

Error encountered when attempting to load files from the same domain due to CORS restrictions

I'm currently developing a website at and I am trying to load the content of an HTML file into an element. I have specified the element as $('.about-us-first-col') and I am loading the content using the code: $('.about-us-first-col&apo ...

javascriptjquerycors

Deciding Between Javascript DOM and Canvas for Mobile Game Development

My idea for a mobile game involves using the Phonegap framework to create a game where players can control a ball's movement by utilizing their phone's accelerometer. I also envision incorporating other elements like enemies and walls into the ga ...

javascriptjqueryhtmlcordova

JavaScript's innerHTML property is failing to update

Hello there, I am currently attempting to update the innerHTML content of the script below: <div id="global-alert-queue" class="layout-wrapper"> <div class="alert success animate-in" role="alert"> Your submission was successful. <button i ...

javascripthtml

What is the best way to emphasize case-insensitive searchtext matches in JavaScript?

If I have data containing words like Krishna, krishna, KRISHNA and I enter the search text as 'krish', it will retrieve all three words. However, when I want to highlight the matching result, only the exact matching part of the string is highligh ...

javascriptsearchtexthighlight

Creating a hierarchical tree in JavaScript and generating nested UL/LI output with ExpressJS

I have a piece of code from another request that is functioning properly. It creates a hierarchical tree with deep levels using JSON. However, I require the output to be in the form of an HTML UL/LI nested structure or a select menu for parent and child el ...

javascriptnode.jsexpress

If there is a lack of text at the beginning, then insert the

I am currently trying to figure out a solution to automatically add our domain name if it is not included when entering the username. In the code snippet below for my form, I want the script to check if "domainname\" is present before the username. I ...

javascripthtmlforms

jQuery generates dynamic HTML tables with a form embedded in each row, allowing users to edit the content within each row using jQuery code without triggering the submit function

After three days of struggling to find a solution, I must admit I am not well-versed in jQuery. The issue at hand involves a PHP page where users can choose a language code from a form and submit it. Upon submission, the jQuery response should build a tabl ...

javascriptphpjqueryajax

Enhancing live query functionality and providing a substitute for DOMNodeInserted specifically tailored for

I have searched multiple times on various platforms for a solution to my specific issue, but have not found one that fits my unique circumstances. My goal is to replace outdated code such as livequery and DOMNodeInserted. See examples below. I am current ...

javascriptjqueryinternet-explorerdeprecatedlivequery

Transform an array of object's designated key values into a string that is separated by commas

Is there a way to convert specific key values of an object into a comma-separated string? I have been able to do this with arrays, but my current challenge is that my data is an array of objects. I want to convert each 'id' value into an array of ...

javascripttypescript

When using the `Document.write()` method, an error is returned stating, "Uncaught TypeError: Cannot read property 'document' of null"

I am currently integrating Angular2 into a website as the front-end framework, and it will be displayed on another website using an iframe. When working with the HTTP post method, I am able to receive a JSON response. Here is the API Post method that retu ...

javascriptangularhttptypescript

The div is not displaying the background image as intended

.cover-image { margin-bottom: 0px; height: 350px; color: white; text-shadow: black 0.3em 0.3em 0.3em; } <div class="cover-image" style="background: url('~/images/hdpic.jpg') no-repeat; background-size:cover"> </div> I&apo ...

htmlcss

How can I dismiss a popup confirmation in React?

The confirmation popup should close when clicking anywhere outside of it. However, the popup does not disappear as expected when the outside area is clicked. Additionally, I am getting the error message "Line 2:8: 'Backdrop' is defined but never ...

javascriptreactjsfrontendeslint

Steps to store radio button selections in local storage

I have a quiz that includes radio buttons, and I need to save the answers on my local storage. However, I am currently stuck and unsure of what else to do. I am learning, so please don't be too hard on me. Thank you! Here is the code I have written s ...

javascriptjsonlocal-storage

The initial navigation pill content failed to display in Bootstrap

I am experiencing an issue with my pills that have 4 tabs. Initially, when I reload the page, the content of the first tab does not show up. However, if I navigate to another tab and then back to the first tab, the content appears. Can anyone suggest a fix ...

jquerycsstwitter-bootstrap