Is it possible to adjust the width of an element depending on the number of sibling elements present?

Question

Is it possible to adjust the width of an element depending on the number of sibling elements present?

Currently, I am working on designing a grid layout for my application with an uncertain number of columns. My goal is to adjust the width of these columns dynamically based on the number of items rendered in the li elements generated by the Angular code on the client side.

For this project, using any external libraries is not an option.


li {
    display: block;
    float: left;
    width: calc(~'(100% - 30px)/n');
    padding-left: 25px;
    text-align: center;
}

I am wondering if there is a method to automatically count the number of <li> elements within a <ul> container dynamically.

html css angular less

Answer 1

Answer №1

If you're wondering how to dynamically count the <li> elements within a <ul> using JavaScript, you can utilize the .length function along with some JQuery.

$("ul li").length; 
// Alternatively
$("#id_of_ul li").length;

You can then perform any necessary manipulations based on the number of <li> elements returned by the function.

function update() {
  return $("#counter li").length;
}

$(".add").on("click", function() {
  $("#counter").append("<li>Random</li>");
});
$(".count").on("click", function() {
  new_count = update();
  $(".output").html(new_count);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="add">Add item</button>
<button class="count">Get count</button>

<br><br>
<div>Number of li tags : <span class="output"> - </span></div>

<ul id="counter">
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>

Answer 2

If you're wondering how to dynamically count the <li> elements within a <ul> using JavaScript, you can utilize the .length function along with some JQuery.

$("ul li").length; 
// Alternatively
$("#id_of_ul li").length;

You can then perform any necessary manipulations based on the number of <li> elements returned by the function.

function update() {
  return $("#counter li").length;
}

$(".add").on("click", function() {
  $("#counter").append("<li>Random</li>");
});
$(".count").on("click", function() {
  new_count = update();
  $(".output").html(new_count);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="add">Add item</button>
<button class="count">Get count</button>

<br><br>
<div>Number of li tags : <span class="output"> - </span></div>

<ul id="counter">
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>

Answer 3

Answer №2

This solution provides the same functionality as @Rithwik's answer but without using JQuery.

function update() {
  return document.querySelectorAll("#counter li").length;
}

document.querySelector(".add").onclick = function() {
  document.querySelector("#counter").innerHTML += "<li>Random</li>";
};
document.querySelector(".count").onclick = function() {
  document.querySelector(".output").innerHTML = update();
};

<button class="add">Add item</button>
<button class="count">Get count</button>

<br><br>
<div>Number of li tags : <span class="output"> - </span></div>

<ul id="counter">
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>

Answer 4

This solution provides the same functionality as @Rithwik's answer but without using JQuery.

function update() {
  return document.querySelectorAll("#counter li").length;
}

document.querySelector(".add").onclick = function() {
  document.querySelector("#counter").innerHTML += "<li>Random</li>";
};
document.querySelector(".count").onclick = function() {
  document.querySelector(".output").innerHTML = update();
};

<button class="add">Add item</button>
<button class="count">Get count</button>

<br><br>
<div>Number of li tags : <span class="output"> - </span></div>

<ul id="counter">
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>

Answer 5

Answer №3

It's baffling to me why my response received a negative rating, so I'll share it again with some code examples for clarification.

Utilizing Flex layout is an incredibly efficient method for ensuring all your columns have equal widths and behave uniformly. Essentially, it functions like a column-oriented grid system (e.g., bootstrap), but with minimal CSS rules.

Below is a snippet of the code:

.parent-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; // When wrapped, containers will fit inside the parent. If 'nowrap' is used, they will extend beyond.
    justify-content: space-around;
    align-items: center;
    align-content: center;
}

.children {
    flex: 1 1 auto; // Maintains consistent width for all items
}

Answer 6

It's baffling to me why my response received a negative rating, so I'll share it again with some code examples for clarification.

Utilizing Flex layout is an incredibly efficient method for ensuring all your columns have equal widths and behave uniformly. Essentially, it functions like a column-oriented grid system (e.g., bootstrap), but with minimal CSS rules.

Below is a snippet of the code:

.parent-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; // When wrapped, containers will fit inside the parent. If 'nowrap' is used, they will extend beyond.
    justify-content: space-around;
    align-items: center;
    align-content: center;
}

.children {
    flex: 1 1 auto; // Maintains consistent width for all items
}

Is it possible to adjust the width of an element depending on the number of sibling elements present?

Answer №1

Answer №2

Answer №3

Similar questions

How to center elements vertically in a navbar using Bootstrap 5

What is the best way to retrieve the column name from a specific MySQL table and store it in an

Including code that is tailored specifically for the Internet Explorer browser on Windows Phone devices

Maintain the proportion of the browser window when reducing its size

Hierarchy Navigation Menu

Tips for personalizing the FileField in wtforms to function as an image button

How to customize the background color in a Thymeleaf select element

Angular encountered an error when trying to access the property "fruits" of an undefined object

JavaScript tutorial: Creating a function to open multiple nested DIVs

Is it possible that CSS files are not being excluded from content scripts in manifest.json?

Alter the element's class during drag and drop操作

Tips for resolving the issue of loading not appearing on screen in Angular

Using Various Buttons in a Bootstrap Form

HTML/CSS - How to make an element wider than its containing element while staying visible

Background misalignment issue in Internet Explorer 6

How to adjust the size of list-style-image in CSS

The div has extra white space at the bottom due to the Hide/Show content feature

Tips for adjusting the duration of a background in jQuery

Are there any CSS hacks available to address the combination of position: sticky and overflow within the parent element?

Troubleshooting a div display issue with jQuery z-index