Please indicate the quantity of items to be displayed in a panel equipped with a scrollbar

Take a look at the current picture:

https://i.sstatic.net/11T4tm.png

The issue is figuring out how to reduce its size and then implementing a scrollbar to navigate through the other elements.

I am working with Bootstrap, and below is my code snippet:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384- 
      MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="col-2 mt-4">
  <p class="text-center mt-5">Requested Hardware</p>
  <div class="list-group" id="list-tab" role="tablist" style="overflow-y:scroll">
    <a class="list-group-item list-group-item-action" data-toggle="list" role="tab">Computer 1</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" role="tab">Computer 2</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" role="tab">Computer 3</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" role="tab">Computer 4</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" role="tab">Computer 1</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" role="tab">Computer 3</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" role="tab">Computer 4</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" role="tab">Computer 1</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" role="tab">Computer 3</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" role="tab">Computer 4</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" role="tab">Computer 1</a>
  </div>
</div>

htmlcssbootstrap-4

Answer №1

Here is an example of how to implement a dropdown menu:

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false>
    Click here for options
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Option 1</a>
    <a class="dropdown-item" href="#">Option 2</a>
    <a class="dropdown-item" href="#">Option 3</a>
  </div>
</div>

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

Ways in which elements can be toggled through jquery or javascript?

There are various words listed below: word1 word2 word3 ... Every word in the list is linked to 1 to 3 examples. When a user clicks on a word, certain actions should take place. I want the examples to display when the associated word (e.g., word1) is c ...

javascriptjqueryhtmlcss

Creating borders around Material UI grid items can be achieved by applying a border style to the

import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Paper from '@material-ui/core/Paper'; import Grid from '@material-ui/core/Grid'; const useStyles = makeStyles((theme) => ({ ...

cssreactjsmaterial-ui

Using Previous and Next Buttons in Bootstrap Tabs for Form Navigation

I am currently facing a challenge in splitting a form into multiple tabs and encountering issues with the next and previous buttons on the second and third tabs. My goal is for the tabs at the top to change state as you cycle through them by clicking the ...

javascripthtmlcssbootstrap-4

Clicking on a checkbox within an HTML table that incorporates handlebar and Express.js

My situation involves a HTML table within a form that is being populated with Handlebars. I need to be able to select certain rows in the table using checkboxes, and upon form submission through a POST request in an Express.js framework, I require the JSON ...

javascriptjqueryhtmlexpresshandlebars.js

Prevent HTML escaping inside of a code tag in JavaScript

Is there a way to search for tags "<" and ">" within a <code> block, setting them as text instead of HTML so that all tags and HTML can be displayed on the page? Currently, when I use jQuery to do a string replace, all tags are coming through ...

jqueryhtmlstringescaping

capture the event when a value is submitted into the input field

One of the challenges I'm facing involves an input field intended for user emails I am trying to capture two specific events from this field using JavaScript The first event is triggered by clicking on the input field itself. The second event I need ...

javascripthtmljquery

As I scroll, the background color of my body vanishes

Seeking assistance with a CSS issue. I have set the height property of my body to 100%, which works well when all content is visible on screen. However, when I need to scroll due to window size changes, the body color disappears and only the HTML backgro ...

htmlcssvertical-scrollingdocument-body

Utilize page variables to activate audio clips upon clicking

Can someone assist me with a script that activates an audio clip when five icons on a page are clicked? The image of the icons can be found below: https://i.stack.imgur.com/mBC6o.png Here is the HTML code: <div class="slide overlay-container" id="int ...

jquerycsshtml5-audio

What is the best way to save a JavaScript array in HTML5 local storage?

I am looking for a way to store an array of inputs using the local storage feature of HTML5. Currently, I am able to add weight inputs to the array, but they disappear once I refresh the page. Can anyone assist me with this? <!DOCTYPE html> <html ...

javascriptarrayshtmllocal-storage

Where should you incorporate Jquery within a PHP-heavy webpage?

I'm struggling to get my script working correctly on a page I created. It's a paginate script that links to the "newsblocks" class. Where should I place the script for it to function properly? <?php /* Template Name: [Newspage] */ get_heade ...

phpjqueryhtml

To calculate the sum of input field rows that are filled in upon button click using predetermined values (HTML, CSS, JavaScript)

Greetings for exploring this content. I have been creating a survey that involves rows of buttons which, when clicked, populate input fields with ratings ranging from 5 to -5. The current code fills in one of two input fields located on opposite sides of ...

javascripthtmlcssvariablesinput

Expanding Submenu Width

Currently working on developing a Dynamic Sub-menu for Wordpress, similar to the one shown here: . However, I am facing an issue with the width as it is set to 'auto' but not aligning the sub-menu properly. I would like the sub-menus to float lef ...

javascriptcsswordpress

ways to create a separation between floated elements

For my photo wall, I am trying to create a specific pattern where every 1, 10, 11, 20, 21, and 30 displays a big image sized at 160x165. In between each pair of big images are 8 small images sized at 85x80. The first line works as expected with one big im ...

htmlcss

When attempting to print the content inside a Bootstrap modal, the display does not appear but instead a blank page is printed

My goal is to print the text content of a bootstrap modal while leaving space for images blank when clicking the print button located within the modal. Unfortunately, upon clicking the print button, I am only getting a blank page without any content displ ...

javascriptphpjquerybootstrap-4bootstrap-modal

Scrolling with jQuery just got a sleek upgrade with our new

Can anyone suggest a jQuery scrollbar that resembles the clean black bar found on the iPhone? I need a simple design without visible up or down buttons. Many scripts I came across offer more features than necessary for my project. My div element has a fi ...

javascriptjquerycssscrollbar

Are there any special CSS hacks that only work for IE8?

When it comes to Internet Explorer 8 (IE8), my preference is to utilize the following CSS: color : green; I am looking to implement a hack that exclusively impacts IE8, without affecting IE9, IE6, and 7. ...

cssinternet-explorer-8conditional-comments

problem specifically occurring on tablets with fixed positioning

Have you checked out the site I'm referring to here? An unusual issue seems to be occurring specifically on tablets. We implemented the scroll to fixed jQuery plugin to fix the position of the sidebar after scrolling, which works perfectly on all de ...

jqueryioscssipadtablet

What is the best way to apply a border to a div with the style 'overflow:auto' specifically when the scrollbar is in use?

I am facing an issue with a dynamically filled div where the content exceeds a specific height, causing overflow:auto to display a scroll bar only after surpassing that threshold. My task now is to apply a 1px border around the entire div only when the co ...

htmlcoding-stylescrollbaroverflow

Rows within the table will not be able to be edited

Within my react table setup, I have created a mechanism to store values based on user inputs in text fields. However, I am facing an issue where the table rows are editable and I need them to be fixed. To achieve this, I am utilizing input elements within ...

reactjsbootstrap-4react-reduxmaterial-uireact-bootstrap

Could my HTML security measures be vulnerable to exploitation?

I have successfully developed a function that accomplishes the following: It accepts a string as input, which can be either an entire HTML document or an HTML "snippet" (even if it's broken). It creates a DOMDocument from the input and iterates throu ...

phphtmlsecurityhtml-parsingdomdocument