0

On my chat app, I have a contact list, and when you click on a contact, it opens a drop down menu on the left of the contact (something like http://screencast.com/t/uM643uwd69CB), but with overflow auto on the contact list, it doesnt appear.

HTML looks like

  <ul id="contact-list">
    <li ng-repeat="contact in contacts | orderBy: '-isOnline': false" ng-controller="contactItemController" ng-dblclick="chatWithUser(contact)" ng-click="contactItemClick($event)">
      </div>
      <div class="name">{{ contact.username }}</div>
      <ul ng-hide="popoverHide" class="contact-dropdown">
        <button ng-click="chatWithUser(contact)" ng-disabled="!isChatAvailableForTheContact(contact)">{{ !contact.isOnline ? 'Leave a' : 'Instant' }} Message</button>
      </ul>
    </li>
  </ul>

CSS looks like

#contact-list {
  width: 100%;
  padding: 0;
  margin: 0;
  /*overflow: auto;*/
}
#contact-list li {
  list-style: none;
  position: relative;
}
#contact-list li .contact-dropdown {
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  margin-left: -150px;
}
#contact-list li .contact-dropdown button {
  width: 100%;
  color: #0077CC;
  background: none;
  border: none;
  cursor: pointer;
}
#contact-list li .contact-dropdown button:disabled {
  color: gray;
}

When overflow-y: auto; is set in #contacts-list, then the pop-over menu will not pop when clicking on a list item. However when it's not set, the pop over menu pops. Any idea?

http://jsfiddle.net/od4vjhbc/1/

Dan P.
  • 1,707
  • 4
  • 29
  • 57
  • Hard to tell exactly without the rest of the CSS/CSS of parent containers/etc - but `visible` is the default property for `overflow`. Also, try setting an `overflow-x` as well and see what happens – elzi Nov 19 '14 at 04:54
  • I tried both overflow: auto and overflow-y: auto; – Dan P. Nov 19 '14 at 04:55
  • Do any of the parent container use `clearfix` classes, like ones that target the `before` or `after` pseudo classes? Those often have `overflow:hidden` on them – elzi Nov 19 '14 at 04:57
  • A parent div has &:after { content: ""; clear: both; display: block; } – Dan P. Nov 19 '14 at 05:01
  • I'm out of ideas... set up a fiddle or plunker and I'm happy to help more – elzi Nov 19 '14 at 05:04
  • Hi, I created a fiddle: http://jsfiddle.net/od4vjhbc/1/ You can click on an element in the list, the popup will be half shown – Dan P. Nov 19 '14 at 08:47
  • I guess I'm just still not seeing the issue. It's behaving as expected. The definition of `auto` in `overflow`: `If overflow is clipped, a scroll-bar should be added to see the rest of the content. ` Removing it and it working would make since, since the default value of `overflow` is `visible`, which does no clipping – elzi Nov 19 '14 at 17:41
  • When clicking on someone in the list, the popover isn't fully seen. If you remove the overflow from `#contact-list`, then you'll see it fully. That's what I need to find a solution for. – Dan P. Nov 19 '14 at 19:33
  • Then remove overflow auto! What am i missing? – elzi Nov 19 '14 at 19:53
  • Explain what you WANT to happen – elzi Nov 19 '14 at 19:53
  • Despite the overflow set on #contact-list, the popup should open exactly as it opens when the overflow isn't set on #contact-list – Dan P. Nov 19 '14 at 19:54
  • I want overflow set on the #contact-list because where there are many contacts I want a scroll bar to appear. – Dan P. Nov 19 '14 at 19:55
  • Ahhh I understand now. You should edit your original question stating that. [here's a SO post that talks about this at great length](http://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue). Looks like a work around would be to add some wrapping divs. – elzi Nov 19 '14 at 20:21
  • It doesn't seem to be the same issue. I'm trying to show something on the left of my list (using margin-left with minus amount of pixels) which doesn't seem possible when using overflow. – Dan P. Nov 19 '14 at 20:36
  • Can you change it structurally so that the contact dropdown is a child element of a container wrapping of elements? – elzi Nov 19 '14 at 20:50

0 Answers0