search

vestman / Select-or-Die

Yet another jQuery plugin to style select elements. Demo at http://vst.mn/selectordie/
MIT License
524 stars 133 forks source link

Option list in overflow hidden container issue #44

Open tjosseau opened 8 years ago

tjosseau commented 8 years ago

For instance, when the select input is inside an overflow:hidden container, the option list is hidden too. That looks normal, but it doesn't look as a default select option list behaviour.

Would it be possible to add an option in order to choose where the option list will be appended (such as body) ? Then it'll surely have to follow the input if it moves (as scrolling). Like :

listParent : 'body'

or :

listParent : $('body')

P.S. : Tell me if you have no time to develop this, I could eventually make it.

deronsizemore commented 8 years ago

Sorry if this isn't a valid solution for your problem but I ran into this too yesterday. Can you not just remove overflow:hidden from the parent container?

tjosseau commented 8 years ago

Unfortunately no, as the container is a home-made window. And even if I set overflow:scroll, the select input wouldn't be shown on top of the window but still inside, needing to scroll to view it.

deronsizemore commented 8 years ago

Could you share the code you're working with? I could paste it into my project and maybe get a better look and see if I can come up with something as a work around.

tjosseau commented 8 years ago

Here is a sample of the issue we have here. https://jsfiddle.net/Totjoss/Lebsxcat/ I also added a could-be raw solution. ;) P.S. : Sorry for the delay, I wasn't able to work on this before.

deronsizemore commented 8 years ago

Hmm... okay I see what you're working with now. I think you're actually having a different problem than I was having. My .sod_list wasn't showing any of the select options at all until I gave it a max-height. From there, that worked for me but that's obviously not the same problem you're seeing.

I'd probaly go with the last "could-be raw solution" and call it a day. Seems to work fine?

tjosseau commented 8 years ago

Well, I think that could be a good approach, however it could be a bit tricky to setup, and maybe you could lose the simplicity of your way of managing selectors. It must be an option and not a default behaviour as it would be for a specific issue (just like my windows).

Again, sorry for the delay, but don't hesitate to send me a mail about it if you need help or a tester. :)

deronsizemore commented 8 years ago

Thanks again. Sure, if you're curious and want to test it, you can try it out live here: http://www.colorfavs.com. Specifically, you'll have to register for an account (I don't activate accounts so you can even use a fake email if you wish) and then visit a detail page (http://www.colorfavs.com/palettes/14958/) and click "add collection." Once you've added a collection, go to another detail page for a different palette and add collection again. Now that you've created a collection, you should see the drop down in the modal window for adding that palette to an existing collection. That drop down menu wasn't showing at all until I gave it a min-height. I assumed it was something weird with the code for that modal window or something.

tjosseau commented 8 years ago

Yeah I see. :) However, my issue occurs when the window content must be restricted with an overflow. For example, just add a "overflow:hidden" to the "#add-collection" element while choosing a collection. P.S.: Nice web app !

deronsizemore commented 8 years ago

P.S.: Nice web app !

Thanks!

As for the issue at hand... seems like a tough one. I've been messing around with it because I initially didn't think it would be that difficult to fix but I stand corrected. I've exhausted all of my CSS knowledge on it and I can't seem to get a working solution. Google turns up a few links about giving the dropdown position: absolute but that doesn't seem to do anything with a select or die dropdown. Sorry I wasn't more help.