position:relative on .chzn-container breaks overflow:auto on parent container #720

Closed
AdrianTP opened this Issue Jul 9, 2012 · 4 comments

Comments

Projects
None yet
2 participants
@AdrianTP

AdrianTP commented Jul 9, 2012

I'm using Chosen in a dynamic form environment with the requirements of several left-floated containers, each holding a bunch of form inputs. The form inputs cross the whole spectrum of available inputs, but most of them are single-select or multiple-select boxes. For this purpose, Chosen has been the best solution I've found to address our needs. A problem results, however, when I assign the parent containers overflow: auto. This, combined with use of the Chosen plugin, results in the scrollbar appearing, despite there being no overflow occurring. Removing Chosen fixes the problem, but this is not desirable.

Removing the position: relative on the .chzn-container class in the CSS fixes the aforementioned scrollbar issue too, however, this change to the CSS breaks the alignment of the ul.chzn-results. I have tried wrapping all Chosen-targeted <select /> elements with <div /> or <span /> elements and associated CSS rules in an attempt to cancel the propagation of the effects of the aforementioned positioning, to no avail.

My choices appear to include:

  1. stop using Chosen and have properly-overflowing containers (while no longer being able to style <select /> elements)
  2. deal with the scrollbars appearing and allowing scrolling due to invisible blank content.

I don't like either of these choices. I will keep fiddling until I find a way to make it work, but if anyone here can offer some helpful advice, I would very much appreciate it. Thank you.

@AdrianTP

This comment has been minimized.

Show comment Hide comment
@AdrianTP

AdrianTP Jul 12, 2012

I tried wrapping the <select /> elements in <span /> tags, and applying various position rules and margins and other stuff to them to try and cancel the upward propagation of the <div />'s position: relative effects, but nothing has worked yet. Any help would be greatly appreciated. We have to have this polished and ready for demonstration to the department head tomorrow. :o

I tried wrapping the <select /> elements in <span /> tags, and applying various position rules and margins and other stuff to them to try and cancel the upward propagation of the <div />'s position: relative effects, but nothing has worked yet. Any help would be greatly appreciated. We have to have this polished and ready for demonstration to the department head tomorrow. :o

@AdrianTP

This comment has been minimized.

Show comment Hide comment
@AdrianTP

AdrianTP Jul 16, 2012

Ok, it's not the position of the elements as I first thought. It's something more obvious. The dropdown list, also being a child element of the parent with overflow assigned, sticks off the bottom of the parent element, and causes the overflow. The overflow-ed parent provides a scrollbar in order to allow access to the bottom-most elements in the dropdown list. I wish there was some sort of elegant fix for this, but the only thing I can think of is rewriting the code to append the list to the document body at the highest z-index possible, with position absolute, and move it to the offset() positions provided by the browser for the <select /> element's puppet <div />.

Oh well. I guess I'll just live with it. I already tried writing my own dropdown box replacement plugin, and while it worked, it was a lot of work to get to that point, and didn't even have proper emulation of the behaviour of an unmodified <select /> element (getting the events to propagate properly was a bit of a pain). Someday, maybe, I might finish my plugin, but for now, I'll take this one shortcoming of Chosen and just deal with it; it's too good everywhere else to warrant giving up on it.

But nonetheless, feature suggestion: determine whether the select box dropdown list would stick off the bottom of the screen, and instead position it above the <select /> element.

Ok, it's not the position of the elements as I first thought. It's something more obvious. The dropdown list, also being a child element of the parent with overflow assigned, sticks off the bottom of the parent element, and causes the overflow. The overflow-ed parent provides a scrollbar in order to allow access to the bottom-most elements in the dropdown list. I wish there was some sort of elegant fix for this, but the only thing I can think of is rewriting the code to append the list to the document body at the highest z-index possible, with position absolute, and move it to the offset() positions provided by the browser for the <select /> element's puppet <div />.

Oh well. I guess I'll just live with it. I already tried writing my own dropdown box replacement plugin, and while it worked, it was a lot of work to get to that point, and didn't even have proper emulation of the behaviour of an unmodified <select /> element (getting the events to propagate properly was a bit of a pain). Someday, maybe, I might finish my plugin, but for now, I'll take this one shortcoming of Chosen and just deal with it; it's too good everywhere else to warrant giving up on it.

But nonetheless, feature suggestion: determine whether the select box dropdown list would stick off the bottom of the screen, and instead position it above the <select /> element.

@ghost

This comment has been minimized.

Show comment Hide comment
@ghost

ghost May 9, 2013

I also ran into this today. Thanks for the explanation of what is happening. Your write-up helped me identify the problem and saved me a lot of time. Cheers.

ghost commented May 9, 2013

I also ran into this today. Thanks for the explanation of what is happening. Your write-up helped me identify the problem and saved me a lot of time. Cheers.

@pfiller

This comment has been minimized.

Show comment Hide comment
@pfiller

pfiller May 14, 2013

Contributor

The overflow issue you describe would be fixed if Chosen inserted itself into the body and positioned based on offset like you describe. That's a duplicate of #613

The dropdown opening up issue you mention is a duplicate of #155.

Contributor

pfiller commented May 14, 2013

The overflow issue you describe would be fixed if Chosen inserted itself into the body and positioned based on offset like you describe. That's a duplicate of #613

The dropdown opening up issue you mention is a duplicate of #155.

@pfiller pfiller closed this May 14, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment