AngularStrap data-container="self" not working on Firefox

Question

I am trying to use hover to show dropdown / popover and use data-container="self" to make the dropdown / popover stay appear when mouse moved to it. This method works on Google Chrome but not on Firefox.

Example Code:

<button type="button" data-placement="right" data-trigger="hover | click" data-delay="300" bs-dropdown="dropdown" data-container="self">Click to toggle dropdown</button>

How can I get it works on firefox?

does it work if you omit the `data-`? use the attribute the way it's defined in the code as `container=`? — Claies, Mar 02 '15 at 02:08
I think there is already logged issue, & i think its by you only https://github.com/mgcrea/angular-strap/issues/1419 — Pankaj Parkar, Mar 05 '15 at 18:46

score 1 · Answer 1 · edited May 23 '17 at 12:12

I never heard of the self keyword as the container parameter in angular-strap. Where does it come from?

Anyway, here, container is useful if you want to append the dropdown to another element. Since it does not seem to be your case, simply do not provide data-container, and the dropdown will be appended to the element itself.

EDIT:

Okay, so, I tried, and saw the problem you are describing. You could try the solution given here (https://stackoverflow.com/a/21293850/4506790): add a specific class to your button, and give it in data-container.

<button type="button"
        class="dropdown-btn"
        data-placement="right"
        data-trigger="hover"
        data-delay="300"
        bs-dropdown="dropdown"
        data-container=".dropdown-btn">
    Hover to toggle dropdown
</button>

AngularStrap data-container="self" not working on Firefox

1 Answers1