0

Refer to this fiddle: http://jsfiddle.net/od4vjhbc/6/

Basically, when overflow is set on #contact-list, the dropdown menu (when clicking on a contact in the list) is not completely shown, as it gets cut.

Remove / comment the overflow on #contact-list, then the popup will be fully shown.

How I can make it work well (menu to be fully shown when clicking the contact) even if overflow is set? (Overflow required if there are a lot of contacts in the list).

What kind of structural change to the HTML should I do, if required?

Dan P.
  • 1,707
  • 4
  • 29
  • 57
  • Why are using a style that is designed to do something that you specifically want to prevent? – George Nov 19 '14 at 20:53
  • Only adding `overflow` breaks it -- which is something I add whenever I need a scroll bar in a list. Never had this problem before because I've never had drop down menus that needed to appear beside the scrolled content. – Dan P. Nov 19 '14 at 20:54
  • I'm afraid you can't have it both ways. If you want to be able to scroll your list, your popup will be hidden as long as it is a descendant of `#contact-list`. Are you sure you don't mean to change the `overflow` for `.contact-dropdown`. Also your HTML is invalid. – George Nov 19 '14 at 20:56
  • The overflow needs to be for the contact list, as thats where someone can have many contacts and a scroll would be needed. What kind of structural change do I need to do? My HTML/CSS is not my strength and it's completely blocking me from going forward with the rest of my app still – Dan P. Nov 19 '14 at 21:01
  • I don't understand. the answer is to remove `overflow-y: auto;` why do you need to keep overflow set to auto? – blots Nov 19 '14 at 21:01
  • So a scroll bar appears if there are many contacts in the list. – Dan P. Nov 19 '14 at 21:23
  • http://stackoverflow.com/a/17432665/1305911 <-> http://jsfiddle.net/jnfsmile/od4vjhbc/7/ – JNF Nov 19 '14 at 21:34

1 Answers1

0

apply your overflow to the .name div instead of the #contact-list

like this: 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;
}
blots
  • 201
  • 1
  • 6