716686 - Nested divs inside a panel don't honor width of panel

Status: NEW

(Core :: Layout, defect)

Description

[Mike Kaply [:mkaply]]

Attachment: XPI that demonstrates problem

We're creating a panel with HTML inside. It looks like this at it's most basic:

    <panel id="test-popup" class="ac-popup">
      <html:div class="ac-searchterm ac-item">
	<html:div class="ac-item-label">
	  This is a really long search because we're trying to figure out if something is wrong when it is really long idfferent Mac
	</html:div>
      </html:div>
    </panel>

With the following CSS:

.ac-popup {
    width: 250px;
}

.ac-popup div.ac-item {
   overflow: hidden;
}

.ac-popup div.ac-item-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


What we're finding is that on Windows, the width is honored, whereas on Mac the panel grows to accommodate the long item.

the best way to demonstrate this is via an add-on which I've attached.

It has a toolbarbutton which when clicked displays the popup.

The same XUL/CSS behaves differently on Mac vs. Windows.

Comment 1

[Mike Kaply [:mkaply]]

Attachment: Output of add-on on Mac

Comment 2

[Mike Kaply [:mkaply]]

Attachment: Panel on Windows

Comment 3

[Ben Bucksch (:BenB)]

> The same XUL/CSS behaves differently on Mac vs. Windows.

And again different on Linux, where it works perfectly as intended.
("For best results, use Linux")