Append the list to body #41

jimmywarting · 2014-04-01T14:56:55Z

I have a select in a div with overflow hidden/auto
In every (most?) usecase it's desirable to let the select go outside of the overflow element, like the native select and select2 dose)

Its true for all kind of typeahead, custom <datalist> polyfill things

The text was updated successfully, but these errors were encountered:

tkrotoff · 2014-04-01T15:16:16Z

Could you explain more and provide a plunker/jsfiddle to understand (+ version number and theme you are using), I'm definitly not a CSS geek :)

jimmywarting · 2014-04-01T15:28:21Z

I don't have a example to show you, but a simple fork of the existing demo will hopefully help explaining the problem (select something)

if the list had been appended/moved to the body like select2 it would not be a problem

andrewboni · 2014-04-09T01:31:12Z

+1 for this

I have a ui-select within a div with overflow:hidden as well, so the dropdown list gets cut off.

More generic info on the issue: http://stackoverflow.com/questions/7074114/css-ignore-overflow-hidden

jimmywarting · 2014-04-09T08:56:24Z

Interesting solution there in the stackoverflow with position: fixed to remove the element and it's children from the normal document allowing it to flow outside of the wrapper element

just don't use any of top/right/bottom/left and set the width to the same width as the input and not use 100% and it's all set

But i have never liked the fixed property. I wonder what the pro/con is compared with appending the list to the <body>. from my own experience mobile browser has never done a good job with fixed

otherwise here is a quick dirty proposal http://plnkr.co/edit/FPQXQmxvfkMaRX64EUFv?p=preview

jimmywarting · 2014-04-09T09:10:31Z

here is another solution aswell: http://plnkr.co/edit/gAEbFYACuO7EV5SKARtj?p=preview

the fixed list-width now inherits from the parent element (require a width on the select element)

zdila · 2014-04-10T10:35:18Z

jimmywarting, thanks for the workaround.

still, append-to-body would be welcomed.

jimmywarting · 2014-04-10T11:30:25Z

I would like to give it a try (appending the list to the body) but I'm too busy with other stuff :(

brettstack · 2014-10-09T22:40:20Z

I'm suprised more people haven't been requesting this, and nothing has been said since Aprial. @dimirc or @tkrotoff, do you have any specific way you would want this implemented? If not, I'll just base it on angular-bootstrap's solution for the datepicker directive.

pjfsilva · 2014-11-04T20:30:55Z

+1 for this

maxavi · 2014-11-09T13:23:41Z

+1! for example useful in modals

lvostinar · 2014-11-17T11:16:50Z

we bumped into this as well, any plans to implement it ?

lebster · 2014-11-19T00:21:25Z

+1 for this too

jguillen · 2014-11-25T19:39:43Z

+1 on this too ... Can anyone provide a best guess of a time frame on 0.9.x release ?

pabuisson · 2014-12-02T16:40:23Z

+1 for this as well. I've been using the position:fixed trick so far, but I'm having issues with scrollable content. I'll be looking into the other workarounds that you guys provided, but I'd be delighted to see this option available out-of-the-box.

jimmywarting · 2014-12-02T17:10:50Z

@pabuisson Thanks for sharing the consequences of position: fixed. Could it have been avoided and solved somehow? Either way i think appending to the body will still be the best approach... 😕

pabuisson · 2014-12-03T09:49:31Z

@jimmywarting Well I'm still looking into it. It seems the position:fixed solution is working, but only in Firefox and not in Webkit/Blink browsers. I think appending the list to the body would be the best approach indeed, but I'm running into peripheral issues related to my project, not related to ui-select.

dmccown1500 · 2014-12-15T16:04:29Z

+1 for this

leipert · 2014-12-30T15:18:35Z

+1 for this

lebster · 2015-01-07T23:23:32Z

@jimmywarting @pabuisson hmm looks like i am having the same problems with scrolling when using position: fixed. Did you guys come with any alternative solutions? I think I am going to have to go back to the normal select. All other solutions out there seem to have issues too.

paynecodes · 2015-01-07T23:37:10Z

There seems to be little to no movement on this. I'm thinking the best (perhaps only) way to fix the issues around dropdowns and overflow content is to append the dropdown to the body element, and position it absolutely. My team and I are racing toward a deadline, and the UI relies on ui-select elements frequently. That being said, I will be working on this solution at some point in the future (date unknown).

Does anyone have any recommendations/requirements, assuming <body> append and position: absolute that I should keep in mind?

EDIT

I'll keep a list of requirements/features to implement here:

Hide dropdown on body scroll

drewbeck · 2015-01-14T21:56:36Z

@jpdesigndev Why do you consider hiding dropdown on body scroll a requirement? This is not standard behavior for regular select dropdowns and I'm not sure why it should be implemented here.

paynecodes · 2015-01-14T22:08:38Z

@drewbeck Well, that's what I've seen.

Here's a quick breakdown (All latest browsers)

OS X
- Chrome
  - Disallow body scroll
- Safari
  - Disallow body scroll
Windows 7
- Chrome
  - Allow scroll, but hide select dropdown immediately
- IE
  - Disallow body scroll

Given this small dataset, perhaps looking into disabling scrolling for everything other than the dropdown list is desirable. That could prove rather complex, I imagine. Thoughts?

drewbeck · 2015-01-14T22:15:59Z

Thanks for that breakdown! I didn't know Windows Chrome was different. I wonder why that is?

I think disallowing body scroll makes more sense, given these options. With 2-finger scroll it's easy to accidentally have your cursor in the wrong box — having the dropdown disappear in that case I think would be very frustrating.

My ideal from a UX perspective would be that the dropdown scrolls with the browser. This isn't standard but I've seen it and I like it quite a bit more than the no-scroll case (see dropdowns on seamless.com for an example). It would be amazing to have this as an option. But disabling body scroll entirely would be consistent with most browsers and most users' experiences I believe.

paynecodes · 2015-01-14T22:31:16Z

@drewbeck

Disallow body scroll is going to be complex. Here's why:

It's not always body that might be scrolling. Think about apps with many sections with overflow: scroll. Perhaps, this can easily be addressed. I'm not sure if scroll events are bubbled up.

I'll keep thinking about it, and put something together soon. We'll see how it goes.

drewbeck · 2015-01-15T02:41:53Z

@jpdesigndev

Yeah I hear you. The app I'm working on is exactly what you say: lots of scrolling sections.

Select2 manages it by adding a "select2-drop-mask" div that spans the entire browser window and catches all scroll and click events. The dropdown div is on top of that. A possible solution here?

This allows the dropdown to flow outside of the area it's 'contained' within. (For example, modals and scrollable content areas.) Related issues: angular-ui#308, angular-ui#234, angular-ui#206, angular-ui#41... And more! :-D Please do not merge this commit in its current state. :-)

…ive that moves the dropdown element to the end of the document body before opening it, thereby solving problems with the dropdown being displayed below elements that follow the `<ui-select>` element in the document. This implementation is modeled after the `typeahead-append-to-body` support from UI Bootstrap. See angular-ui#41 (and quite a few dupes).

cmlenz · 2015-03-04T16:36:27Z

I made PR #718 which just adds an append-to-body attribute to the <ui-select-choices> element, causing it to be moved to end of the document body.

I would appreciate testing, feedback, fixes, and so on. Specifically I have only been able to test the change with the Bootstrap theme on Angular 1.3.x with the latest version of Chrome, Firefox, Safari, and IE.

It would be nice to get this feature into UI Select.

lebster · 2015-03-06T19:06:34Z

Here is another PR that seems to solve this issue. #491

cmlenz · 2015-03-06T20:26:56Z

@lebster Right, but unfortunately the diff on #491 is unusable AFAICT. Maybe formatting changes?

brianfeister · 2015-03-08T16:18:13Z

My hope is to see this fixed via #718.

… moves the dropdown element to the end of the body element before opening it, thereby solving problems with the dropdown being displayed below elements that follow the `<ui-select>` element in the document. This implementation is modeled after the `typeahead-append-to-body` support from UI Bootstrap, but adds the whole select element to the body, not just the dropdown menu, which is needed for the Select2 theme. See angular-ui#41 (and quite a few dupes).

wesleycho · 2016-03-28T13:32:35Z

Closing as already implemented in the library, as documented here

viccowang · 2017-03-07T02:32:01Z

ha~ I fixed my bug. Thanks!

zdila mentioned this issue Apr 10, 2014

Implement datetimepicker-append-to-body dalelotts/angular-bootstrap-datetimepicker#47

Closed

dimirc added this to the 0.9.x milestone Oct 9, 2014

dimirc added the enhancement label Oct 9, 2014

This was referenced Oct 16, 2014

dropdown appears cutoff when used inside a div with overflow: auto #308

Closed

Changing position of dropdown #206

Open

Dropdown options are hiding down, if there is no room space. #234

Closed

anotherchrisberry mentioned this issue Oct 20, 2014

Update to ui-select spinnaker/deck#202

Merged

jimmywarting mentioned this issue Nov 25, 2014

Material design theme #438

Open

aeharding mentioned this issue Jan 16, 2015

move drop down to base of <body> to stop it from being cut off (drop.js) #591

Closed

dimirc modified the milestones: 0.11.x, 0.9.x Feb 17, 2015

cmlenz mentioned this issue Mar 3, 2015

Z-Index problem with dropdown menu #713

Closed

cmlenz mentioned this issue Mar 4, 2015

Add an append-to-body attribute for improved layering. #718

Closed

cmlenz mentioned this issue Mar 9, 2015

Add an append-to-body attribute to <ui-select> #736

Merged

wesleycho removed this from the 0.11.x milestone Mar 27, 2016

wesleycho closed this as completed Mar 28, 2016

Vandivier mentioned this issue Jun 5, 2017

append to body option jseppi/angular-dropdowns#83

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Append the list to body #41

Append the list to body #41

jimmywarting commented Apr 1, 2014

tkrotoff commented Apr 1, 2014

jimmywarting commented Apr 1, 2014

andrewboni commented Apr 9, 2014

jimmywarting commented Apr 9, 2014

jimmywarting commented Apr 9, 2014

zdila commented Apr 10, 2014

jimmywarting commented Apr 10, 2014

brettstack commented Oct 9, 2014

pjfsilva commented Nov 4, 2014

maxavi commented Nov 9, 2014

lvostinar commented Nov 17, 2014

lebster commented Nov 19, 2014

jguillen commented Nov 25, 2014

pabuisson commented Dec 2, 2014

jimmywarting commented Dec 2, 2014

pabuisson commented Dec 3, 2014

dmccown1500 commented Dec 15, 2014

leipert commented Dec 30, 2014

lebster commented Jan 7, 2015

paynecodes commented Jan 7, 2015

drewbeck commented Jan 14, 2015

paynecodes commented Jan 14, 2015

drewbeck commented Jan 14, 2015

paynecodes commented Jan 14, 2015

drewbeck commented Jan 15, 2015

cmlenz commented Mar 4, 2015

lebster commented Mar 6, 2015

cmlenz commented Mar 6, 2015

brianfeister commented Mar 8, 2015

wesleycho commented Mar 28, 2016

viccowang commented Mar 7, 2017

Append the list to body #41

Append the list to body #41

Comments

jimmywarting commented Apr 1, 2014

tkrotoff commented Apr 1, 2014

jimmywarting commented Apr 1, 2014

andrewboni commented Apr 9, 2014

jimmywarting commented Apr 9, 2014

jimmywarting commented Apr 9, 2014

zdila commented Apr 10, 2014

jimmywarting commented Apr 10, 2014

brettstack commented Oct 9, 2014

pjfsilva commented Nov 4, 2014

maxavi commented Nov 9, 2014

lvostinar commented Nov 17, 2014

lebster commented Nov 19, 2014

jguillen commented Nov 25, 2014

pabuisson commented Dec 2, 2014

jimmywarting commented Dec 2, 2014

pabuisson commented Dec 3, 2014

dmccown1500 commented Dec 15, 2014

leipert commented Dec 30, 2014

lebster commented Jan 7, 2015

paynecodes commented Jan 7, 2015

drewbeck commented Jan 14, 2015

paynecodes commented Jan 14, 2015

drewbeck commented Jan 14, 2015

paynecodes commented Jan 14, 2015

drewbeck commented Jan 15, 2015

cmlenz commented Mar 4, 2015

lebster commented Mar 6, 2015

cmlenz commented Mar 6, 2015

brianfeister commented Mar 8, 2015

wesleycho commented Mar 28, 2016

viccowang commented Mar 7, 2017