Instructions on automatically adding a scrollbar to a sidebar menu with a lengthy list using either JavaScript or jQuery

I'm struggling to automatically add a scrollbar to my sidebar menu if it is long. Can someone please help me with this issue? I have tried various solutions but haven't been able to resolve it yet. Here is the HTML code for reference.

HTML:

<div id="menuwrapper" >
    <ul class="MainMenu">
        <li>
            <a href="#"><strong style="margin-left:7px;">Current Openings</strong></a>                              
        </li>
        <li style="height: 27px;">
            <a href="#"><strong style="margin-left:7px;">Travel Request</strong></a>
        </li>
        <li><a href="#"><strong style="margin-left:7px;">Timesheet Management</strong></a>
        </li>
        <li><a href="#"><strong style="margin-left:7px;">Leave Management</strong></a>
        </li>
        <li><a href="#"><strong style="margin-left:7px;">Remuneration</strong></a>
        </li>
        <li>
            <a href="#"><strong style="margin-left:7px;">My Assets</strong></a>
        </li>
    </ul>
    <div id="datepicker"></div>
</div>
javascriptjqueryhtmlcss

Answer №1

I attempted to create this using only CSS

.MainMenu {
 width:200px;
 max-height: 200px;
 background-color:#fff;
 border:1px solid #ccc;
 overflow-x:hidden;
 overflow-y:hidden;
 transition: .5s ease;
}
.MainMenu li a {
  display: block;
  padding-bottom: 10px;
  margin: 10px 0;
  text-decoration: none;
  color: #777;
  border-bottom: 1px solid #f5f5f5;
  overflow: hidden;
}

See the demo here

You could also utilize a plugin like jQuery slimScroll

I have updated the demo to use jQuery-slimScroll, you can check it out here

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

Trying to add a single value to a specific index in a JavaScript array, but it is mistakenly assigning multiple values at once

Currently tackling a matrix algorithm with an early roadblock. The array at hand is: [ [ 0, 0, 0 ], [ 0, 0, 0 ], [ 0, 0, 0 ] ] The goal is to convert it into this: [ [ 0, 0, 0 ], [ 0, 9, 0 ], [ 0, 0, 0 ] ] My plan was to alter the middle value like so ...

javascriptarraysalgorithm

The website was designed to only allow scrolling on desktop devices, not on mobile devices

I noticed that the website is not scrolling properly on mobile devices, specifically when viewed on a Samsung Galaxy S4 Mini. Does anyone have suggestions on how to resolve this issue? ...

jquerycssmobilescroll

HTML table with two rows of cell pairs

Is it possible to achieve the layout shown in this screenshot using an HTML table? I am aware that I can use <div> for this, but I would prefer to maintain the table formatting. https://i.sstatic.net/ESZkn.png ...

htmlcsshtml-table

What is the best way to retrieve the canonicalized minimum and maximum values within the beforeShow method of jQuery UI's datepicker?

I have a pair of datepicker elements that I want to function as a range. When a value is set in the "low" datepicker, it should adjust the minDate and yearRange in the other datepicker, and vice versa with the "high" datepicker. The challenge I'm faci ...

javascriptjqueryjquery-uidatepicker

Real-time changes may not be instantly reflected in the model update

I need to add two numbers together and display the sum in a third input field: HTML <div ng-app="myApp"> <div ng-controller="MainCtrl as mainCtrl"> Main {{mainCtrl.foo}} <br/> <input type="text" ng-model="mainCtrl.foo"/> ...

javascriptangularjs

Crafting LayerGroups on the Fly with Leaflet

Dynamic Creation of LayerGroups: Is it Achievable? I am currently working on a web map showcasing the various tree species present in parks. My goal is to create a separate LayerGroup for each species so that users can toggle visibility using a LayerContro ...

javascriptajaxdynamicleafletleaflet.markercluster

What is the best way to handle an array (or manually loop through ng-repeat)?

AngularJS Version: 1.3.15 Confession: While I have limited knowledge of AngularJS, I am required to utilize it due to its integration in the framework I am working with. I aim to make changes to some HTML/AngularJS code that currently appears as follows: ...

angularjshtml

React Nested Menu Selection

Having trouble displaying TextField values in my React app. Utilizing material UI and material-ui-phone-number packages. Noticed that values appear behind when clicking the flag due to zIndex issue. Looking for modifications only on dialog2.js For code ex ...

cssreactjsmaterial-uireact-hooksjss

Expanding the content within the modal body in Twitter-Bootstraps does not increase its size

Here's the code snippet that I'm working with: <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-conte ...

jquerycsstwitter-bootstrap

Accessing a google doc without signing in as a user

As I embark on the journey to create a simple webpage that can load text from a Google doc, I face the challenge of ensuring that the page operates solely on the client side without the need for any server interaction, since it is hosted on GitHub. User lo ...

javascriptnode.jsgoogle-drive-apigoogle-docs-api

Building an array of ids that contain the checkbox type using jQuery: What's the best way?

Below is the HTML snippet I am working with: <!-- Parent checkbox code goes here --> <input id="ckbCheckAll" class="custom-check ez-hide" type="checkbox" name=""></input> <!-- Child checkbox codes follow --> <input id="practice_ ...

javascriptjqueryhtmlcheckbox

Unraveling stray text in Python BeautifulSoup4

<li><a class="atc-group atc-group-active" href="" data-url="/atc-kodlari/1"> <i class="fa fa-lg fa-pulse fa-spinner atc-group-loading" style="margin-right: 5px; display: none;"></i> ...

pythonhtmlbeautifulsoup

Send text values to a JavaScript function that includes unique characters

Hi there, can you help me figure out how to pass the following value as an argument in a JavaScript function? I am receiving this value dynamically from a Java string variable like so: String vals= "The apostrophe ( ’ or ' ) is a punctuation < ...

javascript

What is the best way to enhance the appearance of a list item that includes a visited hyperlink?

Currently, I am utilizing Stylebot in Chrome to modify certain styles on a webpage that I frequently browse. My goal is to conceal elements in a list that have links I have already visited. For instance, there is a <tr> with the class table-row, and ...

csscss-selectors

What are the potential drawbacks of relying heavily on socket.io for handling most requests versus using it primarily for pushing data to clients?

Is it advisable to switch AJAX routes (called with $.Ajax in jquery) like: GET /animals GET /animals/[id] POST /animals To socket.io events (event bound on client and server for client response): emit("animals:read") emit("animals:read", {id:asdasd}) ...

javascriptajaxnode.jssocket.io

transforming html into json using PHP

I am encountering an issue where I am making a PHP request and receiving the response in HTML format. How do I go about converting this response to JSON format? case 'getzipcode': $CITY= @$_POST['city']; $STREET= @$_POST['street& ...

phphtmljsonrequest

Updating data in MongoDB using a POST request in Angular 2

I am currently working on implementing a post request to update a value in MongoDB. The scenario involves a user inputting a new value (bitcoin) into a form, which triggers the post request upon submission: bitcoinChange(bitcoin){ let headers = new ...

javascriptnode.jsmongodbangular

Using React Native - Issue occurs when tapping a row within a ListView: Property `_pressRow` cannot be read as it is null

Currently, I am working on a small ReactNative + Redux application that utilizes a ListView. While referencing the code example from the documentation available at here, I have implemented a setup similar to the provided sample. However, I am encountering ...

javascriptlistviewreactjsreact-native

Pair of div elements stacking order

In this scenario, there are two div blocks with different z-index values. The first block has a z-index of 0, while the second block has a z-index of -1. I am looking to display the text on top of everything within the block that has a z-index of -1. I hav ...

htmlcss

How can the CSS inside the editor be customized in ng2-ckeditor?

I am looking to customize the functionality of the ENTER key in ng2-ckeditor. I have read about a config option that can help with this on this site. It seems that custom CSS is recommended for making these changes: To adjust paragraph spacing, it is sug ...

javascriptcssangularjsckeditor