What is the reason for Javascript's inability to apply height using the ex unit measurement?

Is there a way to use JavaScript in order to increase the height of an element based on its current CSS height value? I've been able to do it using px units, but not with ex units. Can anyone provide a solution for this?

Here is the HTML structure:

<div class="parent">
   <div class="child">
      Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
   </div>
</div>

And the corresponding CSS code:

.parent {
   width:150px;
   height:100px;
   float:left;
   background:red;
}

.child {
    line-height:2.5ex;
    max-height:5ex;
    margin:2.5ex;
    background: green;
    overflow: hidden;
}

Finally, the JavaScript function:

$(document).ready(function(){
  var child = $(".child");

  var height = parseInt(child.css("max-height").split("ex")[0]);

  height = height + 10 ;

  child.css({"max-height": height});

});

Answer №1

The best way to achieve this is by using the following method:

child.css({"max-height": height + 'ex'});

Answer №2

To apply the CSS property, make sure to include ex. Referencing the jQuery documentation:

If no specific unit is designated (such as 'em' or '%'), "px" will be added to the value.

$(document).ready(function(){
  var child = $(".child");

  var height = parseInt(child.css("max-height").split("ex")[0]);

  height = height + 10 ;

  child.css({"max-height": height + "ex"});

});
.parent {
   width:150px;
   height:100px;
   float:left;
   background:red;
}

.child {
    line-height:2.5ex;
    max-height:5ex;
    margin:2.5ex;
    background: green;
    overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
   <div class="child">
      Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
   </div>
</div>

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

javascript exchange the content when clicking on a hyperlink

I'm encountering a bit of a challenge with this task... My javascript skills are a bit rusty, and I can't seem to pinpoint what's going wrong. My goal is to have a navbar that disappears when a user clicks on a small arrow, revealing a seco ...

placing a div inside another div

As I work on my website, I have created several panels with a repeating texture. To enhance the visual appeal of the site, I decided to add colored divs and adjust opacity for a tint effect instead of using separate images. The issue I'm facing is th ...

Responsive Bootstrap column with a fixed-width card

My Bootstrap-card is currently not adjusting its width properly. I want the card to occupy the full width of the column it's in. Below is a snippet of my code and a screenshot showing the current width along with the desired width indicated by a blue ...

Show the information stored in an array using Angular

I have recently transitioned from using React to learning Angular, and now I am facing the challenge of displaying data from an array. My goal is to implement a dropdown menu where users can select an ID and see the corresponding address displayed. I bel ...

Save the code in a MySQL database

I have created a database using Bootstrap code with a table named classes. Within this table, there is a column labeled sample with a datatype of tinytext. However, when I try to store the following code: <li class="active"><a href="Jumbotron.ht ...

Selenium-Web Driver encounters an issue with reading the 'filter' property as undefined

Recently, I started working with Selenium and encountered an issue while trying to wait for a specific element to load. The error message that popped up was: (node:8472) UnhandledPromiseRejectionWarning: NoSuchElementError: no such element: Unable to ...

Safari browser cutting off POST parameters prematurely

I am encountering an issue where my code works perfectly on all browsers except Safari 6.1.2 on Mac OS Lion. Below is the AJAX post code that I am using - $.ajax({ type: 'POST', dataType: 'text/html', url:"/MyProxy.php ...

Add fresh material to the bottom of the page using Javascript

Hey there, I'm having a bit of trouble with my page where users can post their status. I want the new posts to appear at the bottom after the older posts when the user presses the button. Currently, Ajax is placing all new posts at the top of the old ...

Angular UI Bootstrap Typeahead - Apply a class when the element is added to the document body

In my current project, I am utilizing angular bootstrap typeahead with multiple instances. Some of these instances are directly appended to the body using the "typeahead-append-to-body" option. Now, I have a specific instance where I need to customize the ...

SonarLint versus SonarTS: A Comparison of Code Quality Tools

I'm feeling pretty lost when it comes to understanding the difference between SonarLint and SonarTS. I've been using SonarLint in Visual Studio, but now my client wants me to switch to the SonarTS plugin. SonarLint is for analyzing overall pr ...

Is there a way to deactivate the checkbox in an AngularJS input field?

<div ng-repeat="x in spaceutilization"> <input type="checkbox" name="{{x.filenumber}}" id="{{x.id}}" class = "pdffiles" value="101SP{{x.initials}}.dwg" /><label for="{{x.id}}"><button type = "button" class = "btn btn-primary btn-sm h ...

Guidelines for passing multiple Javascript values to a C# action method

Assuming I have a piece of JavaScript code similar to the one shown in the image. I populate an array with multiple values and then pass this array to an action method in a controller. However, in the action method, I receive this array as an 'object& ...

Is JavaScript Promise Chaining Allowed?

I have a question regarding my code, despite it currently functioning correctly. Specifically, I'm wondering if the sequence of promises in my database is valid. Promise 1 must be fulfilled before moving on to Promise 2 because I rely on the data and ...

Error: Unable to locate module adaptivecards-templating

After adding the module through the command: npm install adaptive-expressions adaptivecards-templating --save and importing it, I encountered an error when trying to run my application: ...

redux form has encountered an error: the element type provided is not valid, a string is expected for built-in components

While working on my stepper code, I attempted to add a radio button. However, this addition resulted in the following error. I referenced this example before implementing it. Despite that, I am still encountering errors. Could you please advise me on how ...

Using Google Maps within a Bootstrap modal window that is only partially loaded

The maps display perfectly fine in a regular div, but when placed inside a Bootstrap modal, only half or part of the map is visible. However, when I open the console, the issue resolves itself and the entire map is shown. Photo without console opened Pho ...

Retrieve a HTML element's tag using jQuery

I have a search bar with two tabs to choose from for the type of search. I am looking to assign the .active class to the list item whose search_type matches a parameter from a request (e.g., params[request_type]). <ul data-tabs="tabs" class="tabs"> ...

Is it possible to dynamically change an ngModel value directly from the component?

I'm currently immersed in an Angular project and my initial file setup was like this: dog.ts: export interface Dog { name: string; age: number; breed: string; } dog.component.ts: import { Dog } from '../dog'; @Component({ //setup ...

I am encountering some distortion with my UI when I open Inspect Element

During the development of my Netflix Replica project, I ran into an issue where the UI became distorted when opening the inspect element. While this issue does not affect functionality, it definitely impacts the overall look and feel of the project. Origi ...

When I hover over one div within another div, JavaScript triggers the "onmouseover" and "onmouseout" events

I'm currently developing a grid layout for my upcoming website. Here is the PHP code snippet I'm working on: echo"<div class='model_container_invisible' onMouseOver='fade(this, 0)' onMouseOut='fade(this, 1)'>" ...