.dropdown-menu does not work correctly within .btn-group-justified on Firefox

[FlameWolf]

Example: http://getbootstrap.com/components/#btn-groups-justified

Here you can see that the left edge of the dropdown menu is positioned below the left edge of the first button in the group, instead of below the left edge of the button that triggered the menu.

(Also, the borders of the buttons that don't have the .dropdown-toggle class disappear in IE8.)

[FlameWolf]

Okay, I have found a temporary solution for this issue, but bootstrap needs to fix this in their code.

I use the following CSS and JS:

        .btn-group-justified .dropdown-menu {
            left: auto
        }

        var addWindowResizeEventHandler = function(handler) {
            if(window.addEventListener)
                window.addEventListener("resize", handler);
            else if(window.attachEvent)
                window.attachEvent("resize", handler);
        };
        /*
        ...
        ...
        ...
        */
        var positionRightAlignedDropdownMenus = function() {
            $(".btn-group > .btn-group > .dropdown-menu-right").each(function(index) {
                var currentElement = $(this);
                currentElement.css("right", currentElement.parent().width() + "px");
                currentElement = null;
            });
        };
        $(function() {
            positionRightAlignedDropdownMenus();
            addWindowResizeEventHandler(positionRightAlignedDropdownMenus);
        });

For IE8, add this:

        <!--[if lte IE 8]>
        <style type="text/css">
        /*<![CDATA[*/
        .dropdown-menu-right {
            right: 0!important
        }
        .btn-group-justified > .btn-default {
            background-color: transparent
        }
        /*]]>*/
        </style>
        <![endif]-->

[cvrebert]

Can't reproduce in Mac Chrome or Android Chrome. Does your issue happen in any browsers besides IE8?

[FlameWolf]

@cvrebert Yes: Firefox 26.

[cvrebert]

Confirmed for Firefox.

[cvrebert]

The IE8 border issue is unrelated; splitting that into a separate issue: #12476

[cvrebert]

The menu works fine on IE8–IE11.

[mdo]

Firefox should be releasing an update that allows relative positioning on table elements with their next version. Closing as a won't fix.

[cvrebert]

Upstream bug: https://bugzilla.mozilla.org/show_bug.cgi?id=63895

[cvrebert]

Assuming that's the correct upstream bug, this ought to be fixed in Firefox 30/31.