Bug:cannot scroll, request:placeholder + position

[topnew]

This project is wonderful, except that:

1 - one bug: if there are many options, and the select box is near top of the page, i can not scroll.

2 - feature request: would it be possible to display selected items inside the select tag, instead of above?, if selected too many items, you can say: 4 items selected. etc

3 - feature request 2: can you get the placeholder info from my original select

Thank in advance.

[pbauerochse]

Hi @topnew ,

could you please attach a screenshot for the issue described in 1? What you are describing in your feature request 2 is basically a combination of #2 and #7 . I will introduce an option for that once I get into it.

Thanks for the placeholder idea. This one is actually quite fast to implement and I think would be a good enhancement.

Unfortunately I am currently involved in a few other projects so I don't find as much time for SOL as it deserves. I'm afraid it will take some time until I get into it.

[topnew]

Attached is a screenshot of your website, by removing the header, so that your first select box is on the very top, and when click, the top part of the select is not reachable, as the .sol-selection is not scrollable.

I did a quick fix: add the next line at end of your sol.css, and it works:

.sol-selection {max-height:200px;}

[topnew]

I have download your latest version, and found out you make the background of the select box as transparent. Onclick, the background comes back as normal.

[pbauerochse]

Hi @topnew ,

SOL calculates the size needed to display the popup and then checks if there is enough space to display it below the input field. If there is not enough space, the options will be displayed above the input field (see https://github.com/pbauerochse/searchable-option-list/blob/master/sol.js#L77). From your screenshot I can't really see if there is enough space at the bottom but I would suspect there is not.

It's hard for SOL to really detect how to position the popup. I could try to add a function that makes the options popup smaller if there is not enough space above nor below.

I guess your solution to set a max-height is the best way to do it for small resolutions (in height) for now. One hint though: you don't have to set the height with css. You may as well pass the height in as an option:

$('.smallSelects').searchableOptionList({
    maxHeight: '200px'
});

$('.mediumSelects').searchableOptionList({
    maxHeight: '400px'
});

$('.asLargeAsItGetsSelects').searchableOptionList();