Reply to: Mutli-select dropdown box

[original PM]

I love the fact that AndyW's last post is in relation to a post by MF trying to bring peace and harmony to the board


oh how time changes everything!

[mudskipper]

Andyw was a troll who flared briefly across the heavens of the forum in the summer of 2006, before crashing and burning as autumn came: Andyw's last post

WHS, and he (or his mum) is the traditional 'last option' on all CUK polls.

[NickFitz]

Is that your name then, or someone you don't like ?

Boo

Andyw was a troll who flared briefly across the heavens of the forum in the summer of 2006, before crashing and burning as autumn came: Andyw's last post

[Boo]

<option>AndyW</option>

Is that your name then, or someone you don't like ?

Boo

[mudskipper]

Well not quite 5 minutes by the time I'd added several of them in a .Net update panel, but now all working and client happy (for now...)

Thanks for the help all (esp. Bunk!)

[lilelvis2000]

give dropkick a look in. Not sure if it supports multi-select out of the box though.

https://github.com/Robdel12/DropKick

[mudskipper]

Absolute positioning is what you need.

Edit fiddle - JSFiddle

Cheers m'dear - I owe you a JD and coke!

[NickFitz]

Works quite nicely with a textbox - especially if I add a dropdown image doobrie.

Just got to work out how to show the listbox without moving the other content - I hate this CSS stuff!

Edit fiddle - JSFiddle

1. Wrap everything in a <div>, and give it position: relative;
2. Give the <select> position: absolute; and left: 0; top: whatever-the-height-of-the-input-is;

Edit: still would prefer a nice 'out the box' solution if anyone's come across one!

Wouldn't we all

Best thing I've read about <select> elements recently is this, which argues for just saying "to hell with the damn thing" and creating a new solution from scratch: https://medium.com/design-ux/bc190d62eff5

[Bunk]

Works quite nicely with a textbox - especially if I add a dropdown image doobrie.

Just got to work out how to show the listbox without moving the other content - I hate this CSS stuff!

Edit fiddle - JSFiddle


Edit: still would prefer a nice 'out the box' solution if anyone's come across one!

Absolute positioning is what you need.

Edit fiddle - JSFiddle

[mudskipper]

Works quite nicely with a textbox - especially if I add a dropdown image doobrie.

Just got to work out how to show the listbox without moving the other content - I hate this CSS stuff!

Edit fiddle - JSFiddle


Edit: still would prefer a nice 'out the box' solution if anyone's come across one!

[hyperD]

Now don't forget to over-engineer it and add some fancy swishy animations. You can easily spend a few days on 5 minutes work

That's nice Bunk! I'll watch mudskipper's wonderful creation and grab it for future once I've bribed her with a tea!

[Bunk]

Yep, that's pretty neat. Thanks!

Now don't forget to over-engineer it and add some fancy swishy animations. You can easily spend a few days on 5 minutes work

[mudskipper]

I meant something like this: jsFiddle.

It's just changing the height of the multi-select on click but it means that the native behaviour is still there. You could also add a fake dropdown for them to click on, which would show one of the selected options and would look better.

Yep, that's pretty neat. Thanks!

[Bunk]

I meant something like this: jsFiddle.

It's just changing the height of the multi-select on click but it means that the native behaviour is still there. You could also add a fake dropdown for them to click on, which would show one of the selected options and would look better.

[mudskipper]

Have you tried this?

Hehe, hoping he'll be along shortly to do my work for me