Incorporate the <li> components into a search bar and ensure that the parent div element does not experience overflowing

Is it possible to have a user add entries to a search bar without them overflowing the parent div container with the class kitchen? I am looking for a way to limit the number of li elements that can be added to prevent overflow, and I am unsure of what language to use for this. Is setting overflow: scroll the only solution?

I am curious if this can be achieved and what coding language would be required, or if setting overflow: scroll is the only option.

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-->

htmlcss

Answer №1

Here are a few potential solutions that come to mind: 1) Utilize the CSS properties overflow: scroll or overflow:hidden in your stylesheet. 2) Consider implementing pagination. Displaying 10 results at a time and requiring the user to click "show more" or navigate to a specific page number. For example, if there are 23 records, the user would see buttons for "1," "2," and "3," each displaying different records with a maximum of 10 per view. 3) Use JavaScript to limit the number of displayed elements.

Answer №2

Looking for a neat css trick to hide elements beyond the 4th position? The code snippet below may be just what you need, especially if you have a specific number of elements to display. 

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

Answer №3

One way to prevent unnecessary addition of objects by the user is to keep track of how many objects currently exist using a global variable. Here's a JQuery example demonstrating this concept:

$(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>

This implementation restricts the user from adding more <li> elements once there are already 10 present.

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

Display a div upon loading with the help of Jquery

Two divs are causing me trouble! <div id="loader"> </div> and <div id="wrapper"> </div> "The wrapper div is not located inside the loader div just to clarify." This is my code: $(window).bind("load",function() { $(&apos ...

jquerycssloadingwrapper

What is the process of adding a phone number with an extension on an iPhone web application?

When building a web application, inserting the following number: <a href="tel:888-123-4567">call now</a> The iPhone will automatically convert that link into an instant call function when clicked. But what should I do if the number includes ...

htmliosphone-numberphone-call

Issues with content overlapping within Bootstrap can arise when elements are

Struggling with my band website development using Bootstrap. Inexperienced in web design, I'm facing difficulties getting elements to align properly without slipping under each other. Looking for insights and suggestions on how to avoid manual CSS adj ...

jqueryhtmlcsstwitter-bootstrapfrontend

Tables that adapt to different screen sizes, displaying perfectly on desktop but with slight variations on mobile devices

I recently experimented with a demo to enhance the performance of tables on my website in development. The demo worked flawlessly on my desktop when I resized using a responsive tester extension for Chrome: https://i.stack.imgur.com/KzFiR.jpg However, u ...

htmlcssresponsive-designresponsive

Color overlay on top of image background

I'm struggling to create a striped colored background with a narrow center single color background on top for showcasing articles and photos. However, I am unable to get the colored background to display correctly. Despite trying different approaches ...

jqueryhtmlcssbackground

The alignment of image and text next to each other is not functioning as intended

I've been attempting to display an image and text next to each other, but I'm encountering some issues. The current output looks like the figure below: https://i.stack.imgur.com/WxxrS.jpg The desired layout is as shown in the following link: ht ...

htmlcssimagetext

Generating an HTML table from SQL data using PHP

I'm attempting to create a dynamic HTML table using PHP to populate it with data from a MySQL database. I've tried using a while loop, but the issue is that it ends up displaying the same first row multiple times. <div class = "container"> ...

phphtmlmysqlihtml-table

Ensure that both the bootstrap buttons and images are aligned correctly on top of the divs

I am struggling to align three buttons vertically on top of two divs that fill the page. Currently, I can only position them horizontally, and my attempts to center them have not been successful. I have tried various methods like flex, changing positions, ...

htmlcssbootstrap-4

PHP Linking Style Sheets

I am exploring the use of an HTML Diff Tool in PHP, specifically looking at this one: https://github.com/rashid2538/php-htmldiff. I am fetching the content of both pages using cURL and passing it to the HTML-Diff tool. It works perfectly fine, but there is ...

phpcss

What is the reason that preventDefault fails but return false succeeds in stopping the default behavior

I'm having trouble with my preventDefault code not working as expected. While using return false seems to work fine, I've heard that it's not the best practice. Any ideas why this might be happening? if ($('.signup').length == 0) ...

javascripthtmlajaxjquery

Concealing the pathway to a background image

Currently, I have a large grid made up of divs that display different sections of an image. By using background-image and background-position, I am able to showcase parts of the image. However, one issue is that users can easily view the complete image by ...

phpjavascriptcss.htaccess

Implement jQuery to close multiple div elements

My dilemma involves a series of divs with different manufacturer IDs listed as follows: manufacturer[1], manufacturer[2], manufacturer[3], ... etc ... In attempting to create a JavaScript for loop to hide each div, I discovered that it was not achievab ...

javascriptjqueryhtmlcss

directive scope is not functioning

Looking to incorporate an input element into my Google Map, I've written the code below: app.directive('GooglePlaceAutoComplete', function() { return { restrict:'AEC', replace: true, scope: { myMap:&ap ...

htmlangularjsangularjs-ng-repeat

Contrasts in characteristics of CSS images versus SVG graphics

I'm curious if there are distinctions between CSS images and SVGs on your website. When referencing CSS images, I mean images constructed with div elements in HTML and then styled using CSS (such as this: https://codepen.io/andrewrock/pen/jOEZxrY). ...

htmlcssperformancesvgdifference

Interested in learning how to code games using JavaScript?

Hi everyone, I'm currently exploring the world of Javascript and have been tasked with completing a game for a class project. The game involves a truck that must catch falling kiwis while only being able to move left or right. A timer is set for two m ...

javascripthtml

Select a random class from an array of classes in JavaScript

I have a collection of Classes: possibleEnemies: [ Slime, (currently only one available) ], I am trying to randomly pick one of them and assign it to a variable like this (all classes are derived from the Enemy class): this.enemy = new this.possibleEn ...

javascripthtmltypescriptvue.jsclass

Utilizing CSS to Create Fixed Position Elements

How can I create a CSS Style with a fixed position property for a div? When I place this particular div inside another div containing text, the fixed-positioned div overlaps the text, causing it to be hidden. I want to align the text and image divs next ...

htmlcss

Jquery is not working as expected

I am having trouble implementing a jQuery function to show and hide select components. It doesn't seem to be working correctly. Can someone help me identify the issue? <html> <head> <meta charset='UTF-8' /> <script ...

javascriptjqueryajaxhtml

Updating the text of an element will occur only when the specified condition has been met

I am trying to dynamically change the text within the <span data-testid="recapItemPrice">ZADARMO</span> element from 'ZADARMO' to 'DOHODOU' only when the text inside the parent element 'INDIVIDUÁLNA CENA PREP ...

javascripthtmljqueryif-statementtext

What is the best way to interact with the dynamic Twitter follow button using Selenium and Python?

Trying to interact with Twitter's follow button can be challenging, especially when it is dynamic and has attributes that are not well-documented in the Selenium documentation. Below is a snippet of the HTML code for the button: Below you will see my ...

pythonhtmlselenium