Chosen and hidden Overflow in Container

[ckosmowski]

I'm trying to use chosen in a complex web application which has a border layout with multiple individual regions which have overflow set to hidden to prevent the contents from scrolling.

Unfortunately this makes the chosen chosen-drop element beeing partially invisble. In my opinion the dropdown of chosen should be able to be displayed even if the overflow of the container is hidden (absolute positioning) because this is the way you would expect it to work since the selecboxes behave that way. Please see this jsfiddle:

http://jsfiddle.net/ZJ73j/1/

for a demonstration and comparison.

The selectmenu which is in development for jquery-ui is handling it the way i would expect it. (Unfortunately for now it screws up for many other features like refreshing its contents).

[ambasador]

instead height apply simple line-height

.layoutContainer{ background: #660066; line-height:40px
}

[ckosmowski]

Uhm... thanks but you removed the overflow: hidden thing which is actually the tricky part about it. If i could do this in my application this wouldn't be a problem at all.

[ambasador]

.select-chosen on position absolute

[ckosmowski]

If you mean:

Setting position: absolute for .select-chosen in CSS this does not work. Otherwise please be slightly more precise.

[starzonmyarmz]

I was able to get this to work the way you want by setting

.chosen-container {
  position: absolute;
}

I don't think this is something we would add to the Chosen codebase because it would remove the Chosen select box from the normal document flow which I believe would be an unexpected behavior, and potentially create even more confusion.

[ckosmowski]

Thanks. I could actually use this with a lot of other headace because the select element itsself won't take space in its container so everything else can't be aligned to that. I think the right way would be having the element itsself be placed normally and only the popup be placed absolute and aligned to the base element. That would mimic the behaviour of native select boxes.

[starzonmyarmz]

The drop down element .chosen-drop does have absolute positioning. The reason why it still gets clipped by the overflow: hidden is because the parent element .chosen-container wasn't absolutely positioned. In this case, the reason why the parent element needs to be absolutely positioned (as opposed to relatively positioned) is because it needs to be removed from the document flow.

[k-risc]

You're problem might be similar to the one discussed in https://github.com/harvesthq/chosen/issues/86. See @robmcguinness code further down.on that page. For chosen v1.0.0 that fix has to be adapted. Hope it helps.

[timothymarois]

@k-risc this issue was not fixed. I have tested this with v1, and the chosen dropdown still hides using modal.

[k-risc]

@timothymarois I am not sure if I understand you correctly. I know that the issue is not fixed in the original chosen code, neither in v1 nor in the older version.

I was just saying that the fix being suggested in the other thread worked for me. But that fix was for the pre v1 version, and it has to be slightly adapted in order to work with v1. I stated this because I thought it might help @ckosmowski or other users.

[timothymarois]

@k-risc yeah I'm sorry I thought you were stating it was resolved in v1. and the post you mentioned, I did try an adapt it with v1, but there are still quite a bit of issues with it. for this reason I have decided to use bootstrap 3, with no modal body scrolling, so that this does not have the overlap issue. I wish there was a much more simpler way to do so. but bootstrap 3 resolves scrolling issues for modals.

[koenpunt]

Duplicate of #86