Adjust the height of the p element depending on its inner content

I have a notification panel where I display the latest notifications. The content of these notifications can vary in length, from short messages to longer ones. Short messages are displayed correctly, but longer ones are not appearing as intended. Here is how I adjusted the code for better appearance:

Below is the HTML structure in question:

<div data-role="content" class="ui-content">
  <ul data-role="listview">
   <li id="notification-block">
   <img class="notification_bell" src="img/icons/alert.png">
    <div class="notification-wrapper">
       <h2 class="notification-header"></h2>
         <p class="notification-message"></p>
         <p class="read-more">
          <a href="#all" style="text-decoration: none" data-transition="slide">
           Read More <span class="fa fa-angle-right carot"></span>
          </a>
         </p>
        </div>
      </li>
    </ul>
</div>

This is how I dynamically set the content of the notification message:

$(".notification-header").append(title); 
$(".notification-message").append(message).first("p");

As shown in the Fiddle link provided below, the text may have overflow hidden with an ellipsis. My goal is for it to adjust the height and break the line to display the complete message.

Here is the recreated design on FIDDLE

javascriptjqueryhtmlcss

Answer №1

Take a look at my code snippet.

I have set the notifications height to be a constant 150px. Each notification message can only have a maximum of 3 lines of text, always aligned vertically in the middle:

.notification-container {
  display: table;
  width: 100%;
}

.notification-content {
  display: table-cell;
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

If a message contains more than 3 lines, the extra content will be truncated and replaced with ellipsis.

.message-text {  
  display: block; /* Used as fallback for non-webkit browsers */
  display: -webkit-box;
  font-size: 13px;
  line-height: 19px;
  max-height: 57px; /* Considering 3 lines with height of 19 each */
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

I also included some additional tweaks to override the default styling by jQuery Mobile.

Answer №2

Make a modification in the CSS code by changing height: 150px to min-height: 150px for the element with ID #notification-block. Also, reset the white-space property for the element with class notification-message:

#notification-block .notification-message {
    white-space:normal;
}

Check out the updated fiddle here: http://jsfiddle.net/84ps035L/

Answer №3

Include the following code in your CSS stylesheet:

.notification-message{
    white-space: normal !important;
    overflow: visible !important;
    word-break: break-word;
}

View Example on Fiddle

Answer №4

.notification-wrapper {
  position: relative;
  left: -10px;
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: 0.6px;
}
#notification-block {
  height: 150px;
  border-radius: 5px;
  margin: 60px 10px 5px 10px;
  background-color: #ffffff;
}
#notification-block h2 {
  margin-top: 45px;
}
#notification-block img {
  margin-top: 50px;
}
.notification-message {
  white-space: normal !important;
}
.read-more,
.read-more a {
  float: right;
  font-weight: bold !important;
  font-size: 16px !important;
  color: black !important;
  text-decoration: none !important;
}
<!DOCTYPE html>
<html>

<head>
  <title>JQM latest</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/git/jquery.mobile-git.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/mobile/git/jquery.mobile-git.js"></script>
</head>

<body>
  <div data-role="content" class="ui-content">
    <ul data-role="listview">
      <li id="notification-block">
        <img class="notification_bell" src="https://cdn1.iconfinder.com/data/icons/trycons/32/bell-512.png">
        <div class="notification-wrapper">
          <h2 class="notification-header">Update on Gate</h2>
          <p class="notification-message">This is an extremely lengthy message that may not display correctly due to its excessive length which exceeds the available space.</p>
          <p class="read-more">
            <a href="#all" style="text-decoration: none" data-transition="slide">
                    More <span class="fa fa-angle-right carot"></span>
                    </a>
          </p>
        </div>
      </li>
    </ul>
  </div>
</body>

</html>

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

Troubleshooting PHP webpage with dysfunctional Python AJAX functionality

I have been working on developing a website that integrates with a python script to control GPIO pins on my Raspberry Pi. Unfortunately, I've encountered some issues with the code and need some assistance in troubleshooting. Could someone please revi ...

javascriptphppythonajax

Guide to automatically converting Google fonts to base64 for inline use

I am currently in the process of creating my own personal blog using next.js. While everything is going smoothly with the use of Google Fonts for font styling, I have encountered an issue with initial content shift upon loading. This occurs when a new fon ...

htmlcssfontsnext.js

Seamless Navigation with Bootstrap Navbar and SmoothScroll

Currently, I have a custom-built navbar that functions perfectly, with full mobile responsiveness. However, I am facing an issue with the nav-item's (headings). The nav-item's direct users to different sections of the same page using #. I have i ...

htmlangulartypescriptbootstrap-4

What steps can be taken to prevent the "unable to convert undefined to an object" error from occurring?

There seems to be an issue with some of the documents not containing the planDetails and planId properties, resulting in the error "can't convert undefined to an object." However, I need to fetch that document whether these properties exist or not. Ho ...

javascriptnode.jsmongodb

Finding the correct index number for the active class - a step-by-step guide

I am currently troubleshooting an issue with my demo. I am having trouble retrieving the correct index number of .carousel-item.active. Even when the second slide is displayed, I continue to receive the index of the first slide. var totalItems = $(&apos ...

javascriptjquerybootstrap-5bootstrap-carousel

Determining which data is retrieved from a database based on a specific field using Sequelize and MySQL

I'm looking to retrieve the most recent records from a database, organized by category. My goal is to fetch 20 records, with 5 of the latest posts in each category. I want to ensure that the result consists of 20 total records, evenly distributed amon ...

javascriptmysqlnode.jsexpresssequelize.js

Attempting to instruct my chrome extension to execute a click action on a specific element found within the webpage

I am currently working on developing a unique chrome extension that has the capability to download mp3s specifically from hiphopdx. I have discovered a potential solution, where once the play button on the website is clicked, it becomes possible to extract ...

javascriptgoogle-chromegoogle-chrome-extension

Encountering null values in an ASP.NET MVC Controller when handling checkboxes with jQuery AJAX requests

I'm having trouble posting data to the server. After selecting checkboxes in a form and retrieving values from them, I attempted using this code: $(".DownloadSelected").click(function () { var values = []; var chks = $(':checkbo ...

jqueryasp.net-mvcajax

"Troubleshooting: The v-model in my Vue project is not functioning properly when used

I am encountering an issue where the v-model directive is not functioning properly inside a v-for loop. Within my template <li v-for="(data, key) in product.variants" :key="data.id"> <input type="radio" :id=" ...

javascriptvue.js

Initiate an AJAX call with various data formats included

I am currently developing an application that allows users to input values through an interface and send AJAX requests (similar to a REST API). My question pertains to sending data of multiple types in a single request. For example, here is a scenario: F ...

javascriptjqueryajax

Understanding how the context of an Angular2 component interacts within a jQuery timepicker method

Scenario: I am developing a time picker component for Angular 2. I need to pass values from Angular 2 Components to the jQuery timepicker in order to set parameters like minTime and maxTime. Below is the code snippet: export class TimePicker{ @Input() ...

javascriptjqueryangulartypescript

Saving the AJAX response object in a global variable - Important fields are not being retrieved

Currently, I am developing an asynchronous webpage in Grails wherein I invoke a controller and display the response as a D3.js network. To ensure further usability, I saved the object as a global variable. Despite the successful execution of the function u ...

javascriptjqueryajax

Streamlining the process of implementing click events on elements selected by class using jQuery

Slowly but surely, I am gaining familiarity with jQuery and have reached the point where I desire to abstract my code. However, I am encountering issues when attempting to define click events during page load. Within the provided code snippet, my objectiv ...

javascriptjqueryjquery-selectors

retrieve the position of a descendant element in relation to its ancestor element

I'm encountering a challenge while attempting to solve this issue. I have elements representing a child, parent, and grandparent. My goal is to determine the offset position of the child (positioned absolutely) in relation to the grandparent. However, ...

javascriptjqueryhtmlcss

Google App Script - Mapping Error - TypeError: Property 'map' is not defined for this object

Thanks to the amazing insight from the community, I recently discovered this helpful tip on BatchUpdating background colors of a specific google sheet. Excited to apply this to my own sheet, I encountered an error saying: TypeError: Cannot read property & ...

javascriptarraysgoogle-apps-scriptmappinggoogle-sheets-api

Tips on transforming JSON data into a hierarchical/tree structure with javascript/angularJS

[ {"id":1,"countryname":"India","zoneid":"1","countryid":"1","zonename":"South","stateid":"1","zid":"1","statename":"Karnataka"}, {"id":1,"countryname":"India","zoneid":"1","countryid":"1","zonename":"South","stateid":"2","zid":"1","s ...

javascriptjsonangularjs

Sending user input from a Laravel modal form to a controller as a parameter

I have a button that triggers a modal form where the user can update their group name. I'm trying to pass the ID into the form using {!! Form::open(['action' => [ 'ContactsController@update', id]]) !!}. I attempted to do this si ...

phphtmljquerylaravelforms

Resolving Node.js Absolute Module Paths with TypeScript

Currently, I am facing an issue where the modules need to be resolved based on the baseUrl so that the output code is compatible with node.js. Here is my file path: src/server/index.ts import express = require('express'); import {port, database ...

javascriptnode.jstypescriptnode-modules

Find a partial match in the regular expression

I am currently working on filtering a list of names using regular expressions (regex). The data is stored in the following format: [ { "firstName": "Jhon", "lastName": "Doe", }, ... ] Users have the option t ...

javascriptregexmongodb

The Typescript compiler is throwing an error in a JavaScript file, stating that "type aliases can only be used in a .ts file."

After transitioning a react js project to react js with typescript, I made sure to move all the code to the typescript react app and added types for every necessary library. In this process, I encountered an issue with a file called HeatLayer.js, which is ...

javascriptreactjstypescript