Add add-to-body option for dropdown #1030

KrisBraun · 2013-09-17T17:49:30Z

Just as tooltip (and now datepicker via #998) support an add-to-body option, it would be handy to have it for dropdown-toggle.

caitp · 2013-09-17T19:05:16Z

@hall5714 your'e on a closing spree today, is it worth submitting another patch for this? I can see how it's useful in cases where designs are sort of constrained, so it might solve a real UX problem for some users.

hallister · 2013-09-17T19:44:14Z

@caitp I'd say this is worth while. Any time we have a absolutely positioned element in a overflow: none this is going to be an issue. I wish we could do this more globally, but individual is going to have to do for now.

caitp · 2013-09-17T22:03:35Z

Hmm, I agree that it might be worth having, but I'm not actually seeing how the infrastructure would work. TWBS doesn't seem to offer anything like this (from a quick glance at the dropdown module), and it seems like it would require removing a child element and re-adding it to <body>. And unfortunately, to my knowledge there's no great way to do this, at least without having more directives for dropdowns.

What if we had like a <dropdown-menu> directive which, in pre-link, appended an empty container to body (if appendToBody is true), and child directives for like <dropdown-header> and <dropdown-item> or whatever, appended to the already added container? Then in dropdownMenu's post-link, it could throw away the original copy of the element (if it had one).

I dunno, it seems much more convoluted in this case. But it might enable more elegant definitions of dropdowns, and also support that use-case. And also break the existing API :D I'm not sure, throw ideas at me.

In any case, I'm not sure that this can be done in a small 3-line-patch sort of way :\

beardedlinuxgeek · 2014-04-24T16:18:44Z

The $modal service takes the parameters templateUrl and template. If you have a list of 30 items and they each have a dropdown menu with roughly the same stuff, it would be good if you could supply a template instead of creating redundant DOM elements.

amcdnl · 2014-09-25T15:13:05Z

Issue also exists when you have the dropdown in a container that has overflow set.

AndrewEastwood · 2014-09-29T22:29:51Z

I'd be nice to have this

ppollono · 2014-10-02T09:17:00Z

Yes I'd like to have this feature!!!

pjfsilva · 2014-11-25T19:54:15Z

+1 Any recent updates on this?

This is a really useful feature when you combine modals and stuff with position relative (bootstrap grid)

onemenny · 2014-12-03T15:15:17Z

+1

seiyria · 2014-12-15T18:29:16Z

Gotta say, I just ran into this issue today and I'm glad we have an issue open for it. +1

LeleDev · 2014-12-19T15:31:27Z

+1

After the last bootstrap update, this became really necessary when using dropdown in tables...

sepatel · 2014-12-22T22:25:02Z

+1

This issue is actually biting me pretty hard. Would really love for some sort of append-to-body equivalent on this.

ghost · 2015-01-18T23:31:10Z

Would be really handy to have, has saved me a number of times with tooltips and popovers so I was expecting this for dropdowns.

verbumfeit · 2015-02-10T09:56:35Z

+1

Just ran into this issue and would love an append-to-body option.

amcdnl · 2015-02-10T13:03:34Z

Open to PRs for this, I don't think this is in the immediate roadmap

brafkind · 2015-03-04T19:14:30Z

+1

rysilva · 2015-03-05T02:19:50Z

I have something working locally, I'll create a PR once I give it a once-over.

rysilva · 2015-03-05T02:29:39Z

@caitp To your concerns, is it against protocol do element.find('.dropdown-menu').appendTo('body');? Since we're depending on bootstrap, and this is the way to specify the dropdown menu, it should probably work although less clean. Alternatively I could specify a directive on the menu.

sheymann · 2015-03-18T15:04:28Z

+1

dzwillia · 2015-03-19T08:15:10Z

This issue plagued me for awhile as well.

The code below is a bit of a kludge, but it works. It clones the dropdown and marshals the click events back to the items in the original dropdown (in case you've been good about event delegation). Hook the following code up to shown.bs.dropdown. If you'd prefer, you can take a look at the fix on JsFiddle: http://jsfiddle.net/8rr0xsy8/

    this.onFixedDropdownShown = function(evt)
    {
        // store the dropdown menu for later use
        var $dropdown = $(this),
            $dropdown_menu = $dropdown.find('.dropdown-menu');

        var off = $dropdown_menu.offset();

        // clone this dropdown menu
        var $fixed_dropdown_menu = $dropdown_menu.clone(true);

        // hide this dropdown menu
        $dropdown_menu.addClass('invisible');

        // position the cloned dropdown menu relative to the document body and show it
        $fixed_dropdown_menu.css({
                'display': 'block',
                'position': 'fixed',
                'top': off.top+'px',
                'left': off.left+'px'
            })
            .appendTo('body');

        // pass-through click events to original dropdown menu
        var i = 0;
        $fixed_dropdown_menu.find('a').each(function() {
            var $related_anchor = $dropdown_menu.find('a').eq(i);

            $(this).on('click', function() {
                $dropdown_menu.removeClass('invisible');
                $related_anchor.click();
            });

            i++;
        });

        // remove the cloned dropdown
        $dropdown.on('hidden.bs.dropdown', function() {
            $dropdown_menu.removeClass('invisible');
            $fixed_dropdown_menu.remove();
        });
    }

Again, it works, but It's not really optimized -- if anyone cares to do so, feel free... :-)

Closes angular-ui#3411 Fixes angular-ui#1030

amcdnl · 2015-08-17T12:44:42Z

Federnando's solution does not work if you scroll

karianna added component: dropdown PRs plz! labels Jan 19, 2015

karianna added this to the Backlog milestone Feb 10, 2015

rysilva mentioned this issue Mar 19, 2015

Feature/dropdown add to body #3411

Closed

andyperlitch mentioned this issue Apr 1, 2015

feat(dropdown): apend-to-body option for dropdown menu #3479

Closed

wesleycho closed this as completed in dfe9854 Apr 2, 2015

wesleycho modified the milestones: 0.13.0, Backlog Apr 2, 2015

wesleycho added type: enhancement and removed PRs plz! labels Apr 2, 2015

fernando-sendMail pushed a commit to fernando-sendMail/bootstrap that referenced this issue Jul 9, 2015

feat(dropdown): Dropdown append-to-body

272f5d9

Closes angular-ui#3411 Fixes angular-ui#1030

fernando-sendMail pushed a commit to fernando-sendMail/bootstrap that referenced this issue Jul 16, 2015

feat(dropdown): Dropdown append-to-body

02e10f2

Closes angular-ui#3411 Fixes angular-ui#1030

fernando-sendMail pushed a commit to fernando-sendMail/bootstrap that referenced this issue Jul 16, 2015

feat(dropdown): Dropdown append-to-body

87ffe25

Closes angular-ui#3411 Fixes angular-ui#1030

fernando-sendMail pushed a commit to fernando-sendMail/bootstrap that referenced this issue Jul 16, 2015

feat(dropdown): Dropdown append-to-body

42232a0

Closes angular-ui#3411 Fixes angular-ui#1030

fernando-sendMail pushed a commit to fernando-sendMail/bootstrap that referenced this issue Jul 16, 2015

feat(dropdown): Dropdown append-to-body

c8dfb32

Closes angular-ui#3411 Fixes angular-ui#1030

fernando-sendMail pushed a commit to fernando-sendMail/bootstrap that referenced this issue Jul 16, 2015

feat(dropdown): Dropdown append-to-body

938b101

Closes angular-ui#3411 Fixes angular-ui#1030

fernando-sendMail pushed a commit to fernando-sendMail/bootstrap that referenced this issue Jul 16, 2015

feat(dropdown): Dropdown append-to-body

c0f123a

Closes angular-ui#3411 Fixes angular-ui#1030

fernando-sendMail pushed a commit to fernando-sendMail/bootstrap that referenced this issue Jul 16, 2015

feat(dropdown): Dropdown append-to-body

ae1219f

Closes angular-ui#3411 Fixes angular-ui#1030

fernando-sendMail pushed a commit to fernando-sendMail/bootstrap that referenced this issue Jul 16, 2015

feat(dropdown): Dropdown append-to-body

4b41daa

Closes angular-ui#3411 Fixes angular-ui#1030

fernando-sendMail pushed a commit to fernando-sendMail/bootstrap that referenced this issue Jul 16, 2015

feat(dropdown): Dropdown append-to-body

a4975f7

Closes angular-ui#3411 Fixes angular-ui#1030

fernando-sendMail pushed a commit to fernando-sendMail/bootstrap that referenced this issue Jul 16, 2015

feat(dropdown): Dropdown append-to-body

dc580ed

Closes angular-ui#3411 Fixes angular-ui#1030

fernando-sendMail pushed a commit to fernando-sendMail/bootstrap that referenced this issue Jul 16, 2015

feat(dropdown): Dropdown append-to-body

7b7fee5

Closes angular-ui#3411 Fixes angular-ui#1030

fernando-sendMail pushed a commit to fernando-sendMail/bootstrap that referenced this issue Jul 16, 2015

feat(dropdown): Dropdown append-to-body

5682395

Closes angular-ui#3411 Fixes angular-ui#1030

fernando-sendMail pushed a commit to fernando-sendMail/bootstrap that referenced this issue Jul 16, 2015

feat(dropdown): Dropdown append-to-body

6c18567

Closes angular-ui#3411 Fixes angular-ui#1030

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add add-to-body option for dropdown #1030

Add add-to-body option for dropdown #1030

KrisBraun commented Sep 17, 2013

caitp commented Sep 17, 2013

hallister commented Sep 17, 2013

caitp commented Sep 17, 2013

beardedlinuxgeek commented Apr 24, 2014

amcdnl commented Sep 25, 2014

AndrewEastwood commented Sep 29, 2014

ppollono commented Oct 2, 2014

pjfsilva commented Nov 25, 2014

onemenny commented Dec 3, 2014

seiyria commented Dec 15, 2014

LeleDev commented Dec 19, 2014

sepatel commented Dec 22, 2014

ghost commented Jan 18, 2015

verbumfeit commented Feb 10, 2015

amcdnl commented Feb 10, 2015

brafkind commented Mar 4, 2015

rysilva commented Mar 5, 2015

rysilva commented Mar 5, 2015

sheymann commented Mar 18, 2015

dzwillia commented Mar 19, 2015

amcdnl commented Aug 17, 2015

Add add-to-body option for dropdown #1030

Add add-to-body option for dropdown #1030

Comments

KrisBraun commented Sep 17, 2013

caitp commented Sep 17, 2013

hallister commented Sep 17, 2013

caitp commented Sep 17, 2013

beardedlinuxgeek commented Apr 24, 2014

amcdnl commented Sep 25, 2014

AndrewEastwood commented Sep 29, 2014

ppollono commented Oct 2, 2014

pjfsilva commented Nov 25, 2014

onemenny commented Dec 3, 2014

seiyria commented Dec 15, 2014

LeleDev commented Dec 19, 2014

sepatel commented Dec 22, 2014

ghost commented Jan 18, 2015

verbumfeit commented Feb 10, 2015

amcdnl commented Feb 10, 2015

brafkind commented Mar 4, 2015

rysilva commented Mar 5, 2015

rysilva commented Mar 5, 2015

sheymann commented Mar 18, 2015

dzwillia commented Mar 19, 2015

amcdnl commented Aug 17, 2015