Error in height calculation due to setting the CSS property line-height

Question

Error in height calculation due to setting the CSS property line-height

I am facing a challenge in setting the height of a parent ul element based on the included li's. The issue arises when the CSS property line-height contains fractional digits, causing inaccuracies in the calculation. This results in the calculated height being either too large or too small, as shown in this example on jsfiddle (1px in Firefox). The discrepancy in height becomes more pronounced in larger lists, sometimes varying by several pixels. Setting the height of the parent ul can also make it too small for its content.

How can I accurately calculate the height values, particularly when line-height is involved?

javascript jquery height css

Answer 1

Answer №1

To exclusively focus on modern browsers, one can utilize window.getComputedStyle which provides all CSS properties as they appear on the screen after painting.

Answer 2

To exclusively focus on modern browsers, one can utilize window.getComputedStyle which provides all CSS properties as they appear on the screen after painting.

Answer 3

Answer №2

So this might not be the most elegant solution, but here's a little hack I came up with:

In the header:

<script type="text/javascript> 
function adjustHeight(height) {
   document.getElementById('adjustable').style.height = height + "px";
}
</script>

And then in the body:

<ul id="adjustable">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
</ul>

Whoops, made a mistake there initially. All good now.

Answer 4

So this might not be the most elegant solution, but here's a little hack I came up with:

In the header:

<script type="text/javascript> 
function adjustHeight(height) {
   document.getElementById('adjustable').style.height = height + "px";
}
</script>

And then in the body:

<ul id="adjustable">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
</ul>

Whoops, made a mistake there initially. All good now.

Error in height calculation due to setting the CSS property line-height

Answer №1

Answer №2

Similar questions

JavaScript - Imported function yields varied outcome from module

Change the color of the Parent Menu when a childMenu is clicked on using CSS and HTML

Troubleshooting Next.js 14.1 Pre-rendering Issue: A Step-by-Step Guide

PHP library dompdf is having issues when rendering CSS styles

I am having difficulty retrieving the JSON object that was sent by the servlet

Assigning a function to a variable

Issue with mobile functionality: dropdown parent menu link fails to operate

Understanding the usage of jQuery transitionend to prevent interruptions in CSS animations

Incorporate a button within a listview on Kendoui to trigger the opening of a modal window

relocate & adjust the position of an element beneath a sibling element in the HTML code

Using Javascript and jQuery to validate strings within an array

Should I convert to an image or utilize the canvas?

Enhance user interface dynamically with additional components in ReactJS by rendering them onClick. Master the optimal

Guide to selecting an element with a combination of text and a random number using Selenium with JavaScript

How can jQuery be forced to accept an XHTML string as XML?

Adjusting the starting position of text within an HTML <li> element

Django is indicating that the path is not reachable

Tips on personalizing the default html template in nuxt

Tips for saving the latest counter value in CSS and showcasing it as content in HTML

Perform an Ajax request to a C# Controller Function