Looking for a way to design a friends requests menu using Bootstrap's dropdown feature. My goal is to create a scrollable menu where friend requests overflow if there are more than 3, while keeping the "you have 2 requests" and "check all requests" options fixed when scrolling. Does anyone know how to achieve this since dropdown menus don't seem very customizable?
Successfully solved the query....To enable scroll functionality for a section of your drop-down menu, you need to designate the scrollable content within an
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
.dropdown-menu > li{
}
.dropdown-menu > li > ul{
padding-left: 10px;
list-style-type: none;
height: 100px;
overflow-y:auto;
overflow-x:hidden;
left:0px;
display: block;
}
.dropdown-menu > li > ul > li{
left:0px;
display: block;
}
ul {
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Solution</h2>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Friends List
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">you have 10 requests </a></li>
<li>
<ul>
<li><a>Friendx</a></li>
<li><a href="#">Friend1</a></li>
<li><a href="#">Friend2</a></li>
<li><a href="#">Friend3</a></li>
<li><a href="#">Friend4</a></li>
<li><a href="#">Friend6</a></li>
<li><a href="#">Friend7</a></li>
<li><a href="#">Friend8</a></li>
<li><a href="#">Friend9</a></li>
</ul>
</li>
<li><a href="#">read more </a></li>
</ul>
</div>
</div>
</body>
</html>It appears that this question bears a striking resemblance to: Making a drop-down menu scrollable. Did you happen to explore other users' inquiries before posting?
To create a designated space for friend requests, place them within their own div and apply the following styles: max-height: 120px and overflow: auto. This configuration should meet your requirements.
(Feel free to adjust the max-height value to suit your needs, 120px is simply an example)
For instance:
.requests {
max-height: 120px;
overflow: auto;
}
I used the google charts API to create a chart, but I am facing an issue with the X-axis labels. When I have multiple strings on the X-axis, the labels do not look good. I suspect that the problem lies in the X column type being a string instead of DATETIM ...
I have implemented a bootstrap modal in my dashboard. The button that triggers the modal is placed on another page where I extend the dashboard layout. When I click on a button with a different product ID, I want the modal to display information related ...
I'm currently attempting to find a solution for replacing a Greek letter within a string with another character. For instance: value = "Hello μ!"; value.replace("μ", "You"); alert(value); //Expected result: Alerted value should be "Hello You!" Re ...
Is it possible to manipulate the parent element using CSS based on the presence of a specific child? For instance, I want to style a table cell differently if the first child within it is a link. <td>Hello</td> <td><a href="go.html"& ...
I'm feeling a bit lost trying to implement Ajax for sending emails via a web form I built. I'm unsure how to make Ajax work within Wordpress. Firstly, I created an action: add_action( 'wp_ajax_siteWideMessage', 'wpse_sendmail&apo ...
Recently, I've been delving into the world of JavaScript and jQuery to master the art of creating functions. I've noticed that many functions include an (e) in brackets. Allow me to demonstrate with an example: $(this).click(function(e) { // ...
I have designed a custom cms theme with various customization options that I wish to showcase in a live demo. My goal is to implement Javascript style switchers or modifiers where users can choose values from checkboxes or select tags, and see their select ...
I'm currently studying Javascript and Dynamic HTML as part of a course, and while I'm not encountering any errors or warnings in Firefox and Chrome, I believe there might be some issues with my code. If anyone would be willing to take a look and ...
I have a query that spans across two areas - CSS styling and JQuery functionality. The primary concern I have is related to my code snippet below. When the user clicks on the circular profile image, ideally, the "profiledrop" div should become visible. ...
I am working with Material-UI and have implemented a <Table> component. Each dynamically rendered <TableRow> in the <TableBody> needs to include a button (<FlatButton>) within one of the columns. When this button is clicked, a <D ...
Within my table, I have column names enclosed in <th> tags and only numerical values inside <td> tags. When the user clicks on a <th> tag, the sorting algorithm organizes the values in ascending or descending order. .sortElements(function ...
I am currently working on a basic webpage that includes a question and a set of radio buttons. Depending on the option selected by the user, the question will be hidden and either a correct or incorrect message will be displayed, both of which are initiall ...
I am trying to implement a continuous image scroll (marquee) in HTML. My goal is to have the marquee stop scrolling when the mouse hovers over it, with the images returning to their initial position. Once the mouse moves away, I want the marquee to resume ...
For my web application, I am looking to generate multiple blocks with different content. Instead of creating all the elements on the server side, some need to be dynamically created based on user input. So far, I have considered two options for generating ...
Utilizing jQuery ajax to retrieve a file from an FTP server and wanting to display the loading percentage in a Progress loader. Previously, when using HTTP requests and XMLHttpRequest, the following code was effective: $.ajax({ xhr: function() { ...
My goal is to insert a short video into my popover. I attempted the following method: let htmlString = ` <div class="embed-responsive embed-responsive-16by9"> <video class="embed-responsive-item" src="..." loop muted></video&g ...
Seeking to achieve vertical centering of my column content. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <div class="container d-flex h-100"> <div class="row mt-5 "> < ...
I have created a simple example where I aim to display the output of a JavaScript function on an HTML page. Furthermore, I want to apply two different animations using CSS to this output. When attempting to apply the animations (clockwise and countercloc ...
I have a tooltip and I would like to customize its background. Currently, the default background color is black. <ng-template #start>Start</ng-template> <button [ngbTooltip]="start" type="button" class="btn btn-outline-danger"> &l ...
I have integrated the Bootstrap datetime picker (bootstrap-datetimepicker.min.js) into my code. Within the DIV tag, I have included the class="modal fade" to open the first popup. In the first popup, there is a datetime picker. When clicking on the picker ...