add
elements with search bar and prevent overflow from parent div element

Question

I want to be able to have a user continually add entries into a search bar and for those entries to not overflow past the parent div container with the class kitchen. I am wondering if its possible to be able to set a limit on how many li elements can be added, to stop it from overflowing the div parent element.

I am wondering if this is at all possible, and what language i'd need to do it, or is overflow: scroll the only property i could set to deal with this.

ul{
    list-style-type: none;
    height: 300px;
}

li{
    float: left;
    margin-bottom: 2px;
    display: inline-block;
    color: #FFFFFF;
    border: solid 2px #FFFFFF;
    padding: 1rem;
    background: #222222;
    width: 50%;
    border-radius: 10px;
}

.fa-check-circle{
    color: green;
}

.fa-edit{
    color: red;
}

.row {
    position: relative;
    display: flex;
    flex-direction: row;
}

.kitchen{
    color: black;
    background: url('../img/refrigerator.jpg');
    background-size: cover;
    background-position: 50%;
    border: solid 5px #FFFFFF;
    padding: 3rem;
    height: 100%;
}

.col{
    width: auto;

}

.lunchbox{
    background: url('../img/lunchbox.jpg');
    background-size: cover;
    background-position: 50%;
    display: inline-block;
    border: solid 5px #FFFFFF;
    padding: 3rem;
    width: 100%;
    height: 100%;
}

.column{
    flex: 1;
    margin-top: 3rem;
    margin-right: 3rem;
    margin-left: 3rem;
    height: 600px;
}

<div class="kitchen">
  <ul class="col">
    <li>Apple<span class="far fa-check-circle"></span><span class="far fa-edit"></span></li>
    <li>Cheese <span class="far fa-check-circle"></span>      <span class="far fa-edit"></span></li>
    <li>Cereal <span class="far fa-check-circle"></span>      <span class="far fa-edit"></span></li>
    <li>Ice Cream <span class="far fa-check-circle"></span>      <span class="far fa-edit"></span></li>
    <li>Steak <span class="far fa-check-circle"></span>      <span class="far fa-edit"></span></li>
    <li>Orange <span class="far fa-check-circle"></span>      <span class="far fa-edit"></span></li>
    <li>Apple<span class="far fa-check-circle"></span><span class="far fa-edit"></span></li>
    <li>Cheese <span class="far fa-check-circle"></span>      <span class="far fa-edit"></span></li>
    <li>Cereal <span class="far fa-check-circle"></span>      <span class="far fa-edit"></span></li>
    <li>Ice Cream <span class="far fa-check-circle"></span>      <span class="far fa-edit"></span></li>
    <li>Steak <span class="far fa-check-circle"></span>      <span class="far fa-edit"></span></li>
    <li>Orange <span class="far fa-check-circle"></span>      <span class="far fa-edit"></span></li>
    <li>Apple<span class="far fa-check-circle"></span><span class="far fa-edit"></span></li>
    <li>Cheese <span class="far fa-check-circle"></span>      <span class="far fa-edit"></span></li>
    <li>Cereal <span class="far fa-check-circle"></span>      <span class="far fa-edit"></span></li>
    <li>Ice Cream <span class="far fa-check-circle"></span>      <span class="far fa-edit"></span></li>
    <li>Steak <span class="far fa-check-circle"></span>      <span class="far fa-edit"></span></li>
    <li>Orange <span class="far fa-check-circle"></span>      <span class="far fa-edit"></span></li>
  </ul>

  <button type="button" class="clear_btn">clear items</button>

</div><!--kitchen-->

Why not just keep a count of how many have been added and disallow after a certain number? — Libra, Nov 19 '19 at 20:48

score 1 · Accepted Answer · answered Nov 19 '19 at 20:54

1

Potential solutions I see right now: 1) Overflow: scroll / overflow:hidden in your CSS stylesheet 2) Pagination. Showing eg. 10 results at once and in order to show more user will have to click "show more" or a number of "page". So if there are 23 records, than user will see buttons "1" "2" and "3". Every button will show different records. Max 10 per one view. 3) Limit the number of displayed elements with JS

answered Nov 19 '19 at 20:54

AdamKniec

1,607
9
25

how could i limit the number of displayed elements, some functionality that counts how many createelements occur? – derek Nov 19 '19 at 20:57
You can store those elements in an array and than you'd be able to modify the array using specific array methods. Take a look here -> https://stackoverflow.com/questions/26568536/remove-all-items-after-an-index – AdamKniec Nov 19 '19 at 20:59
1

So the logic might be something like: 1) Put these items into the array 2) see how many of them are inside the array using arr.length method. 3) If there are more than eg. 6 different elements - remove the last one. After that, you render the list based on that array using eg arr.map mathod – AdamKniec Nov 19 '19 at 21:03
awesome, so basically i could do some if fuction that checks if the array.length reached a certain length and if so, have it splice the element, yes? – derek Nov 19 '19 at 21:03
https://imgur.com/a/MPWFtAp My issue is im not sure when to splice the element, since i currently have 16 elements side by side, but only the bottom two overflow past the parent div – derek Nov 19 '19 at 21:33
1

It looks like your parent element has a "height" property declared in px to some particular value and after adding some elements with JS it's just becoming too small, that's why the new elements are overflowing. Is that right ? Maybe fix the parent CSS to be more flexible for new dynamically generated elements ? – AdamKniec Nov 19 '19 at 21:38
i'd like to preserve the two column layout – derek Nov 19 '19 at 21:40
would setting the kitchen div height to auto work? not sure how i could make it more flexible – derek Nov 19 '19 at 21:41
ok removing the height from worked, but for some reason if i dont display a height and width for the element, it gets really small and doesnt have trhe same width and height as the div – derek Nov 19 '19 at 21:43
1

try removing the height property – AdamKniec Nov 19 '19 at 21:43
any reason why removing the height and width property for the second column div causes it to not display – derek Nov 19 '19 at 21:46
maybe try giving each column width: 50% and height: 100% ? – AdamKniec Nov 19 '19 at 21:47
not working if i set both columns to the same width and height, it seems the
being set to 50% is what causes the div to expand. I want both columns to be the same width and height becuse i will add functionality to move either to each side later.

derek

Nov 19 '19 at 21:52

It;s hard to help with no codepen link. Can you create one ? It will help us to help you :) – AdamKniec Nov 19 '19 at 21:53

1

Aditionally, we are slightly changing the topic of your question at this point since it was originally related to limiting the items user can add – AdamKniec Nov 19 '19 at 21:56

https://codepen.io/derek-loureiro/pen/QWWYBXL sorry about that yes, I guess im asking for more help, sorry!!! wondering if you can see both columns, I guess not because i have the img folder with the images. – derek Nov 19 '19 at 21:57

1

Yeah it's hard to tell what exactly is wrong and how it should look like. Maybe try considering marking this issue as completed and raise another one ? – AdamKniec Nov 19 '19 at 22:04

1

ok, sure, thanks and I appreciate the concise responses everyone and the extra help. Im eternally grateful. – derek Nov 19 '19 at 22:09

score 0 · Answer 2 · answered Nov 19 '19 at 21:04

0

There is a css ~solution.. it hides the 4th+ elements. If you have exact number of elements to show - this works for you.

li:nth-child(n+4) {
    display: none;
}

answered Nov 19 '19 at 21:04

V.Volkov

731
3
12

That's a pretty good idea ! However we need to remember that with that solution, elements will be still in the DOM – AdamKniec Nov 19 '19 at 21:10
@AdamKniec `display: none;` removes elements from the DOM, at least visually, unlike `visibility: hidden;`. You're right in that they are technically still a member of the DOM code though. – Libra Nov 19 '19 at 21:15
This is incorrect. Take a look here : https://css-tricks.com/forums/topic/does-display-none-remove-elements-from-the-dom/ – AdamKniec Nov 19 '19 at 21:17
CSS can not remove elements from the dom – AdamKniec Nov 19 '19 at 21:18
so i could do array.from(foodItems) which could be document.querySelectorAll('.foodItems') a class I can add to all
elements

derek

Nov 19 '19 at 21:21

DOM is not mentioned in the task – V.Volkov Nov 19 '19 at 21:32

But if DOM is needed, and you use jQuery, try `$(element).is(":visible");` to track visible elements. – V.Volkov Nov 19 '19 at 21:35

its not mentioned but yes I'd prefer it not exist in the DOM either. So the preferred solution would be for me to remove the element from being displayed and the DOM. – derek Nov 19 '19 at 21:36

const foodItems = document.querySelectorAll('.food_item'); const checkMark = document.querySelectorAll('.fa-check-circle'); const deleteItem = document.querySelectorAll('.fa-edit'); const SubmitBtn = document.querySelector('.clear_btn'); Array.from(foodItems); console.log(foodItems); ``` – derek Nov 19 '19 at 22:01

Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/202682/discussion-between-derek-and-v-volkov). – derek Nov 19 '19 at 22:01

score 0 · Answer 3 · answered Nov 19 '19 at 21:07

To prevent the user from adding more objects than necessary, keep a count of how many currently exist using a global variable. Here's an example in JQuery using the applicable logic

$(document).ready(function(){
  licount = 0;
  $('li').each(function(){
    licount+=1;
  });
  $('Button').click(function(){
    if(licount<10){
      $('ul').append('<li>'+$('input').val()+'</li>');
      $('input').val('');
      licount+=1;
    }
  });
});

ul{
  width: 100px;
  list-style-type: none;
}

li{
  background-color: black;
  font-size: 20px;
  text-align: center;
  border-radius: 20px;
  color: white;
  padding: 10px;
  margin: 10px 0;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    test
  </li>
  <li>
    test
  </li>
  <li>
    test
  </li>
  <li>
    test
  </li>
  <li>
    test
  </li>
</ul>
<input>
</input>
<button>
  Add
</button>

As you can see, the user is no longer allowed to insert anymore <li>s after there is 10.

add elements with search bar and prevent overflow from parent div element

3 Answers3

add
elements with search bar and prevent overflow from parent div element