Ways to adjust the height of a UL element using Jquery in the given situation

Trying to determine the height of multiple ul elements in an HTML structure and set the maximum height for all. Currently, the code I'm using is setting the height to 0 for both ul elements. How can I adjust it to set the max height for both uls? In my CSS, I have used .col-sm-2.list-unstyled with float:left as well.

HTML

  <ul class="dropdown-menu">
    <li>
        <!-- Content container to add padding -->
        <div class="yamm-content">
            <div class="row">
                <ul class="col-sm-2 list-unstyled">
                    <li>
                        <a href="/residential/en/us/about/">About Carrier</a>
                    </li>
                    <li>
                        <a href="/residential/en/us/about/corevalues/">Core Values</a>
                    </li>
                    <li>
                        <a href="/residential/en/us/about/fact-sheet/">Fact Sheet</a>
                    </li>
                    <li>
                        <a href="/residential/en/us/about/willis-carrier/">Willis Carrier</a>
                    </li>
                    <li>
                        <a href="/residential/en/us/about/history/">Carrier History</a>
                    </li>
                </ul>

                <ul class="promotions-block menupromotion col-sm-2 list-unstyled hidden-xs">
                    <li class="holder col-lg-12 col-md-12 col-sm-4">
                        <div class="promo_wrpr">
                            <a class="inpage-module-link" href="http://www.naturalleader.com" target="_blank">
                                <section class="promo_img_hldr">
                                    <img src="demo/img/natural-leadership-sustainability-utc-82x76.jpg"
                                         title="Learn about Natural Leadership and Sustainability at United Technologies Corporation"
                                         alt="Learn about Natural Leadership and Sustainability at United Technologies Corporation"
                                         class="img-responsive">
                                </section>
                                <div class="promo-text">
                                    <h3>
                                        <strong>NATURAL LEADERSHIP</strong>
                                    </h3>
                                    <span class="common-cta rightarrow">
                                        Learn about sustainability
                                        <span class="link-2liner">
                                        </span>
                                    </span>
                                </div>
                            </a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </li>
</ul>

JS part

 var b = $(".col-sm-2.list-unstyled").length;
        var c=0;        
        $(".col-sm-2.list-unstyled").each(function() {
                 if ($(this).height() > c) {
                c = $(this).height()
            }
        }); 
        for (var a = 0; a < b; a++) {
        $(".col-sm-2.list-unstyled").eq(a).removeAttr("style")
            $(".col-sm-2.list-unstyled").eq(a).height(c)
        }

If you have any suggestions on how to fix this issue, please let me know. Thank you!

jqueryhtmlcss

Answer №1

To achieve this, my recommendation is to utilize jQuery. It offers a straightforward solution that works incredibly well. Start by obtaining the height of the primary ul element; assuming it's the .list-unstyled ul element, and store it in a variable. Afterwards, you can use jQuery to set the ul element's height based on this variable.

jQuery(document).ready(function() { 
    var setHeight = $(".list-unstyled").height();
    $(".promotions-block").height(setHeight);
});

Answer №2

I have found a solution that works for me: http://example.com/solution

Both elements now have the same height.

var x = $(".element").length;
var y = 0;
$(".element").each(function() {
  if ($(this).height() > y) {
    y = $(this).height()
  }
});
for (var z = 0; z < x; z++) {
  $(".element").eq(z).height(y)
}

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

Extracting URLs of latest news articles from dynamic websites using web scraping technology

I've been exploring ways to extract investing news articles from a dynamic website using Python. Despite following some tutorials that worked for static websites, I've encountered difficulties in retrieving the URL to a specific article. The code ...

pythonhtmljsonweb-scrapingfinance

The class may not consistently be assigned to the user when they are positioned at the top of the

Implementing this code allows for different classes to be applied to #nav based on whether the user is scrolling UP, DOWN, or at the top of the page. .nav-down is applied when the user scrolls up .nav-up is applied when the user scrolls down .nav-d ...

javascriptjqueryhtmlcss

Experience mind-bending timing functions in CSS animations with IE11

Despite working perfectly on Firefox, Chrome, and Edge, the animations on my website seem to have erratic timing on IE11. To see the animation as intended: However, on IE11, the animation behaves differently: I've attempted adjusting the animation- ...

htmlcssinternet-explorer-11ie11-developer-tools

The autocomplete feature in the hotel name field is designed to recognize HTML-encoded entities, thanks to the combination of

I keep encountering this issue. "King & Grove Hotel" is displaying as "King &amp; Grove Hotel" This problem arises while using jQuery autocomplete. ...

jqueryhtml

Tips for retrieving the ajax results for multiple deferred calls using jQuery

I am struggling to utilize the jQuery deferred function as illustrated in the following code snippet. <script type="text/javascript"> var appUrls = { GetDataUrl : '@Url.Action("GetData")' }; ...

javascriptjqueryjquery-deferred

Implement CSS Hover functionality even when the element is concealed through JavaScript

My website features a menu with headings and submenus. The issue arises when users hover over the headings - the submenus fail to show up. Additionally, after clicking on an item in the submenu, the submenu should be hidden using Javascript. However, the h ...

javascripthtmlcss

Generate images in real-time based on model element properties

I have a ViewModel that includes a collection of strings that I intend to use for dynamically displaying images on a Razor view. public List<string> States { get; set; } = new List<string>() { "ACT", "NSW", "NT", ...

c#htmlimagebootstrap-4razor-pages

Is it possible to align the link to the right side of the footer?

I am puzzled as to why the Back to top link does not float to the right of the "footer area" which has a width of 960px. Upon running my code, the back to top link ends up in the middle of the footer. Here is the snippet of my code - can anyone identify th ...

htmlcss

Is there a more efficient approach to streamline Javascript code similar to the chaining method used in JQuery?

When working with jQuery, it's possible to streamline the code by running multiple methods in a single statement: $("#p1").css("color", "red").html("Hello world!").attr("class","democlass"); But how can this be accomplished in Javascript? document. ...

javascriptjquery

Removing an item from a list by clicking a button

I am currently developing my own version of a mini Twitter platform. Everything is functioning smoothly, however I am facing an issue with deleting specific tweets upon the click of a button. I have attempted using splice(), but it consistently deletes th ...

javascripthtmlarrayssplice

JQuery syntax for adding a comma before the first element in an array

When I insert data into an array, the output in my console includes a comma before the first element (9). How can I remove this comma from the first element using the provided code snippet? ,9,My firstname,My lastname,<a href="/cdn-cgi/l/email-protecti ...

javascriptjquery

Space between text input box and a button on an ASP.NET webpage

Creating a search bar in .aspx file is not difficult. Here is the code you can use: <div align ="center" style="border: thick none #008080; height: 597px; width: 670px; color: #000000; font-weight: bold; font-size: medium; font-family: Cal ...

htmlasp.netsearch

Inconsistencies in the functionality of the "hidden" class in Bootstrap 4

I seem to be having trouble using the "hidden" class to conceal content at a specific size. It seems to work on some elements, but not others. Here is how I am using it: <div class="hidden-sm">something to hide in small viewports </div> ...

csshtmlbootstrap-4

HTML declaration vandalized site

There's a strange bug I've encountered with the use of !DOCTYPE html. Whenever I attempt to implement the HTML5 Doctype, my page ends up looking distorted. It seems like all scripts are not properly closed. However, when I switch to !DOCTYPE ht ...

htmldoctypexhtml-1.0-strict

What is the best way to conceal a fixed element that is blocking other elements?

Having trouble clicking on an element due to a drop-down menu covering all other elements. Incorporating Selenium in Visual Studio, I am attempting to create a testcase where I initially click on a checkbox in a drop-down menu and then proceed to click on ...

c#cssseleniumelementsendkeys

Search for styling cues within the text and transform them into distinct elements

I was inspired to develop a unique text editor that utilizes cues within the text, such as :strong:, to set formatting rules. Here is the code snippet I have so far: <?php $document = $_GET["document"]; $user = $_GET["user"]; if ($user != n ...

javascriptjqueryhtmlcss

Instructions on utilizing *ngFor for every category I have

Seeking assistance with a specific issue. I currently have four labeled tabs, each containing projects. My goal is to ensure that when I save a project, it remains in the same tab where I initiated the save operation, rather than appearing across all tabs. ...

htmlcssangulartypescript

Struggling with implementing a grid layout using CSS

I am currently facing an issue with my code where I am attempting to set up a wrapper element as a grid. However, upon inspecting the page, I am receiving notifications that my inputs for display, grid-template-columns, and grid-template-area are considere ...

csscss-grid

How to prevent Bootstrap panel collapse from creating gaps

I am currently working on a layout with 2 columns, each containing 2 panels. Both of these columns are set to be 50% wide (col-md-6) with collapsible panels inside. The collapsing functionality works just fine, but the issue arises when I expand a panel. W ...

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3

Obtaining the count of a specific column in Angular 6 by grouping objects based on the same value in an array

In TypeScript, I have an array of objects and I am using a foreach loop. The array contains 2 columns with a progress value of 100, while the rest have values less than 100. My goal is to calculate the count of columns with a progress value of 100, which ...

htmlangulartypescript