Javascript Issue: Difficulty Implementing Item List Container

Question

Javascript Issue: Difficulty Implementing Item List Container

Is there a way to adjust the list so that it only expands the container from the bottom, causing a scrollbar to appear?

LINK TO CODE EXAMPLE: https://codepen.io/Redd_1/pen/qBZWJQG

javascript html css

Answer 1

Answer №1

To ensure that newly added items stay within the ul and do not affect the whole container, you can simply set the height on the ul element and apply overflow-y: auto.

Check out this Demo:

// Add item to list
var form = document.getElementById('addForm');
var itemList = document.getElementById('items');

form.addEventListener('submit', addItem);

function addItem(e) {
  e.preventDefault();

  // User input
  var newItem = document.getElementById('item').value;

  document.getElementById('item').value = '';

  if (newItem == '') {
    alert('Please enter some value.');
  } else {
    // Adding values to the list
    var li = document.createElement('li');
    li.className = 'list-group-item';
    li.appendChild(document.createTextNode(newItem));

    // Add a delete button
    var deletebtn = document.createElement('button');
    deletebtn.className = 'btn';
    deletebtn.appendChild(document.createTextNode('X'));

    // Append button and li to the ul
    li.appendChild(deletebtn);
    itemList.appendChild(li);
  }

}


// Remove item from list
itemList.addEventListener('click', removeItem);

function removeItem(e) {
  if (e.target.classList.contains('btn')) {
    if (confirm('Are you sure you want to delete the item?')) {
      var li = e.target.parentElement;
      itemList.removeChild(li);
    }
  }
}

// Search items
var filter = document.getElementById('filter');

filter.addEventListener('keyup', filterItems);

function filterItems(e) {
  var text = e.target.value.toLowerCase();
  var items = itemList.getElementsByTagName('li');

  Array.from(items).forEach(function(item) {
    var itemName = item.firstChild.textContent;
    if (itemName.toLowerCase().indexOf(text) != -1) {
      item.style.display = 'block';
    } else {
      item.style.display = 'none';
    }
  })
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Montserrat;
}

header {
  background-color: green;
  color: white;
  margin: 0;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.container {
  padding: 20px;
  position: fixed;
  width: 500px;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
  line-height: 40px;
  border: 1px solid black;
  border-radius: 10px;
}

ul {
  overflow-y: auto;
  list-style: none;
  padding: 10px;
  height: 10em;
}

.list-group-item {
  border: 1px solid grey;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
}

.btn {
  background-color: red;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 6px;
}

.sbtn {
  color: white;
  background-color: rgb(46, 46, 46);
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  padding: 8px;
}

.sbtn:hover {
  background-color: black;
}

button {
  float: right;
}

input[type=text] {
  padding: 5px;
}

<!DOCTYPE html>
<html>

<body>
  <link rel="stylesheet" href="itemApp.css">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">

  <header>
    <h1>Item lister</h1>
    <input type="text" class="search-bar" placeholder="Search items..." id="filter">
  </header>


  <div class="container">
    <h3>Add items</h3>
    <form id="addForm" name="myForm">
      <input type="text" id="item" name="textField">
      <input type="submit" class="sbtn" value="submit">
    </form>

    <h3>Items</h3>
    <ul id="items">
      <li class="list-group-item">Item 1 <button class=btn>X</button> </li>
      <li class="list-group-item">Item 2 <button class=btn>X</button> </li>
      <li class="list-group-item">Item 3 <button class=btn>X</button> </li>
      <li class="list-group-item">Item 4 <button class=btn>X</button> </li>
    </ul>
  </div>

  <script src="itemApp.js"></script>
</body>

</html>

Answer 2

To ensure that newly added items stay within the ul and do not affect the whole container, you can simply set the height on the ul element and apply overflow-y: auto.

Check out this Demo:

// Add item to list
var form = document.getElementById('addForm');
var itemList = document.getElementById('items');

form.addEventListener('submit', addItem);

function addItem(e) {
  e.preventDefault();

  // User input
  var newItem = document.getElementById('item').value;

  document.getElementById('item').value = '';

  if (newItem == '') {
    alert('Please enter some value.');
  } else {
    // Adding values to the list
    var li = document.createElement('li');
    li.className = 'list-group-item';
    li.appendChild(document.createTextNode(newItem));

    // Add a delete button
    var deletebtn = document.createElement('button');
    deletebtn.className = 'btn';
    deletebtn.appendChild(document.createTextNode('X'));

    // Append button and li to the ul
    li.appendChild(deletebtn);
    itemList.appendChild(li);
  }

}


// Remove item from list
itemList.addEventListener('click', removeItem);

function removeItem(e) {
  if (e.target.classList.contains('btn')) {
    if (confirm('Are you sure you want to delete the item?')) {
      var li = e.target.parentElement;
      itemList.removeChild(li);
    }
  }
}

// Search items
var filter = document.getElementById('filter');

filter.addEventListener('keyup', filterItems);

function filterItems(e) {
  var text = e.target.value.toLowerCase();
  var items = itemList.getElementsByTagName('li');

  Array.from(items).forEach(function(item) {
    var itemName = item.firstChild.textContent;
    if (itemName.toLowerCase().indexOf(text) != -1) {
      item.style.display = 'block';
    } else {
      item.style.display = 'none';
    }
  })
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Montserrat;
}

header {
  background-color: green;
  color: white;
  margin: 0;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.container {
  padding: 20px;
  position: fixed;
  width: 500px;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
  line-height: 40px;
  border: 1px solid black;
  border-radius: 10px;
}

ul {
  overflow-y: auto;
  list-style: none;
  padding: 10px;
  height: 10em;
}

.list-group-item {
  border: 1px solid grey;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
}

.btn {
  background-color: red;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 6px;
}

.sbtn {
  color: white;
  background-color: rgb(46, 46, 46);
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  padding: 8px;
}

.sbtn:hover {
  background-color: black;
}

button {
  float: right;
}

input[type=text] {
  padding: 5px;
}

<!DOCTYPE html>
<html>

<body>
  <link rel="stylesheet" href="itemApp.css">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">

  <header>
    <h1>Item lister</h1>
    <input type="text" class="search-bar" placeholder="Search items..." id="filter">
  </header>


  <div class="container">
    <h3>Add items</h3>
    <form id="addForm" name="myForm">
      <input type="text" id="item" name="textField">
      <input type="submit" class="sbtn" value="submit">
    </form>

    <h3>Items</h3>
    <ul id="items">
      <li class="list-group-item">Item 1 <button class=btn>X</button> </li>
      <li class="list-group-item">Item 2 <button class=btn>X</button> </li>
      <li class="list-group-item">Item 3 <button class=btn>X</button> </li>
      <li class="list-group-item">Item 4 <button class=btn>X</button> </li>
    </ul>
  </div>

  <script src="itemApp.js"></script>
</body>

</html>

Javascript Issue: Difficulty Implementing Item List Container

Answer №1

Similar questions

Updating AngularJS: Removing the hashtag using history.pushState()

To interact with a dynamic div that is generated without any specific ID or class, which is contained within a fixed div, you can

disabling swap button icons temporarily in Angular 16

picking out a particular set of data from a JSON document

Syntax for making an Ajax call

Adding npm packages to your Vue.js application

Is there a way to make the submit button navigate to the next tab, updating both the URL and the tab's content as well?

Oh no! "The accuracy of your BMI calculation is in question."

Reorder the Polymer dom-repeat element following a modification in the child component's value

Displaying user input data in a separate component post form submission within Angular

Zingchart encounters issues when attempting to plot a CSV file containing over 10 columns

IE9 causing issues with Angularjs ng-route - views fail to display

Why is my custom 404 page failing to load after building my Next.js application?

Angular application enhancing Vaadin web components with unique styling

Error encountered: The fiber texture failed to load due to a component becoming suspended during the response to synchronous input

Methods for adding information to a database without using HTML form tag

Ways to ensure a ul li element perfectly fits inside a div element without any spaces

Is there a way to implement a scrollbar that only scrolls through one specific column in an HTML table?

Tips for managing and loading data into a dataGrid or table with the help of ReactJS and ReactHooks

When a legend is clicked, it should display only the selected item while hiding all other legends automatically in a chart created