Due to the excess number of items on the list, the dropdown menu is unable to appear to the left of the list without exceeding the margin-left

Take a look at this fiddle: http://jsfiddle.net/od4vjhbc/6/

Essentially, when the overflow property is set on #contact-list, the dropdown menu (triggered by clicking on a contact in the list) is not fully displayed and gets cut off.

If you remove or comment out the overflow property on #contact-list, then the popup will be shown in its entirety.

How can I ensure that the dropdown menu is fully shown even if the overflow property is set? (The overflow property is necessary if there are numerous contacts in the list).

What modifications should I make to the HTML structure, if any?

javascriptjqueryhtmlcss

Answer №1

Make sure to apply the overflow property to the .name div rather than the #contact-list.

Here is an example: http://jsfiddle.net/mn01ouat/


#contact-list {
  width: 150px;
  float:right;
  padding: 0;
  margin: 0;
  max-height: 300px;
  /*overflow-y: auto;*/
}

#contact-list .name{
  width: 150px;
  max-height: 300px;
  overflow-y: auto;
}

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

Enabling droppable blocks within Jquery UI for div elements

I am facing a challenge in achieving my goal. Here is an example I have set up: http://jsfiddle.net/zs6US/ $('.draggable').draggable({ revert: 'invalid' }); $('#droppable').droppable({ accept: '.draggable' ...

jqueryjquery-uijquery-ui-draggablejquery-ui-droppable

Live element click event unbinding does not function as anticipated

I have a function that dynamically adds elements to the page: function modalConfirm (title, msgBody, btnOK, btnCancel) { element = '<div class="ui-modal-widget"><div class="confirm"><h2>'+title+'</h2><div>& ...

jqueryclickliveunbind

AngularJS: Changing color property using toggle when a CSS class is modified

After starting to learn AngularJS, I have been able to find many helpful answers on this forum. However, there is one particular issue that has been causing me frustration. My goal is to dynamically change the color property of an element only when it has ...

javascriptjqueryangularjs

Is there a way to include a lockfile in a docker container as an optional step?

I am attempting to create a docker image that can optionally incorporate a yarn or npm lockfile during the build process. I want to include it explicitly, but also ensure that the build does not fail if the lockfile is missing. The goal is to respect dete ...

javascriptdockernpmyarnpkglockfile

Is there a way to send the id to the print page within the ajax success function?

https://i.stack.imgur.com/SGAAT.jpg The image above shows the selection of 3 records with MR No 7, 8, and 9. These selected records were successfully inserted into my database. Now, I need to retrieve these IDs in the ajax success function to pass them to ...

jquerymysqlsqlajaxcodeigniter

Locate records in MongoDB using Node.js where a specific field contains identical elements as a given object

Here is an array of ids: [5, 7, 9, 4, 18] A collection contains documents inserted in the following format: db.collection('groups').insert( [ { members: [ {member: 5, hasSeen: false, requiresAction: true}, {member: ...

javascriptnode.jsmongodbexpress

Every time I make changes to the page, the outdated CSS keeps reappearing

I recently updated the CSS for React CKEditor 4 on my website to give it a better look. The changes were reflected when I first viewed the page on localhost, but strangely, when I go to another page with CKEditor 4, it reverts back to the original stylin ...

cssreactjssassckeditor

What is the best method for retrieving data through an ajax call in my modular JavaScript setup?

Working with a basic modular JavaScript structure, my goal is to request a random quote from an API and display it on an HTML page using Mustache.js. I previously achieved this without the modular approach, but now I'm attempting it in a more structur ...

javascriptjqueryajaxmodular

React - updates to server values do not display in DOM right away

When I work from the client side, I have a modal in my HomeComponent that allows me to select an element. My goal is to then display that selected element within the same HomeComponent (in the productosEnVenta function). The element chosen in the modal is ...

javascriptreactjs

Checking if a button is visible in PythonFinding out if a button is visible

My task involves verifying the display status of a button element on the UI. The code was written in Java script by a developer, and I am creating automated scripts using Selenium Webdriver and Python. When the button is enabled, a li tag is added to the c ...

javascriptpythonselenium

Implementing Bootstrap Popover on Rails FullCalendar

Fullcalendar is absolutely stunning. I recently tried it out and now I would like to add a popover to provide event descriptions when clicked. Here's an example of what I'm aiming for: Although I'm not well-versed in json and javascript, I ...

javascriptruby-on-railsjsontwitter-bootstrapfullcalendar

Excessive CSS Padding on Tablets and Mobile Devices

I recently completed this website based on a PSD design, using basic CSS techniques. However, I am encountering an issue with unwanted padding on the sides of the site when viewed on mobile devices and tablets. I would like the left and right edges of the ...

csswordpresswordpress-thesis-theme

Leveraging JavaScript Functionality with ASP.NET Identity Roles

I'm currently working on an application that utilizes JQuery DataTables. The goal is to have these tables visible to all users, but restrict the click functionality to a specific user role. One way I can achieve this is by setting up authorization on ...

javascriptc#jqueryasp.net-mvcasp.net-identity

What's causing this sluggish performance?

I'm in the process of developing a Google Chrome extension and I can't help but wonder why window.onload = loadPage; function loadPage() { document.getElementById('nav-robux-amount').innerHTML = '0'; console.log(" ...

javascriptroblox

Javascript Encapsulation example

Could someone help me with this function query: var MyObject3 = function (a, b) { var obj = { myA : a, myB : b } ; obj.foo = function () { return obj.myA + obj.myB ; } ; obj.bar = function (c) { return obj.myA + c ; } ; return obj ; } ; I und ...

javascript

`Js ajax call to consume Restful API endpoints`

I'm currently attempting to connect to a Java-based REST service using jQuery, and the JSON response from the service looks like this: { "data": [ { "bookAuthor": "Bhaveh Thaker", "bookISBN": "ISBN 10: 0-596-52926- ...

jqueryajax

Using super() conditionally in Typescript

Is it possible to conditionally load the super class based on a parameter in TypeScript? I am facing an issue where I need to send a parameter in super() based on a specific condition, but placing an if statement before super() results in a compilation err ...

javascriptangulartypescript

fancybox guaranteeing that the fancybox image is not stored in the cache

I'm encountering a problem with fancybox where it's loading a cached image. I want to prevent the image from being cached before displaying it on the page, but so far, my attempts with various callbacks (beforeShow, afterShow, afterLoad, beforeLo ...

javascriptjqueryimagecachingfancybox-2

Exploring the intricacies of initializing a JavaScript function

I recently inherited a large JavaScript file from a previous developer, and I'm trying to decipher some of the key sections. Here is the complete code: $(function () { var homepage = (function () { // Main functionalities are defined he ...

javascript

Create an object name in an Angular factory or service by utilizing the initial and final dates contained within an array

I have a method in my Angular service/factory that accepts an array of arrays containing objects [[{},{}],[{},{}]] as a parameter. The parameter structure consists of arrays representing weeks, with each day's object containing a date and an integer ...

javascriptangularjsarrays