Skip to main content ↑ ↓
Select Box Madness Started by Spuds · · Read 24494 times 0 Members and 1 Guest are viewing this topic. previous topic - next topic

Select Box Madness

After seeing the screen capture with how our select boxes look under Safari on OSx ( http://www.elkarte.net/community/index.php?topic=600.msg6562#msg6562 ) see the search box. 

I added in the -webkit-appearance:none; setting as noted in that thread and that does make the box style like the input boxes around it which is good for a consistent view / layout.  The downside is that setting also removes the drop arrow, so the result is that it looks like a plain input box, and when selected the dropdown appears.  

So I wanted to get the OSx folks thoughts on that.

An alternative I found while searching da web is to use a div with hidden overflow that is smaller in width than the select box it contains.  This clips the select arrow for all browsers and allows you to add your own.  Downside I guess is that its a fixed width so it could clip the text of the selection, so one size may not fit all or we add in some backup js to fix that, or just live with it.

I attached some screen clips of how it looks on windows and nix under Fx and Chrome, and one of OSx safai
 

Re: Select Box Madness

Reply #1 –

A search box à la xenforo with the select in a droppy? O:-)
That would also reduce the impact of the search box.
Bugs creator.
Features destroyer.
Template killer.

Re: Select Box Madness

Reply #2 –

Not sure what xenforo did  :'(

I made a PR with the above https://github.com/elkarte/Elkarte/pull/1316  with some additional explanation (we only have to do the clipping for ie8 & 9), the other browsers I was able to use css to turn off the select drop arrow and then add our own as shown in the above pics.  So its a no JS all CSS thing and as far as I could tell stable across multiple browsers and OSs

Re: Select Box Madness

Reply #3 –

Quote from: emanuele – A search box à la xenforo with the select in a droppy? O:-)
That would also reduce the impact of the search box.
The sad thing with default select boxes is not only the inability yo style the drop downs, but also the fact that they don't accept icons and any HTML. This is why I spent so much time writing my own plugin...

Re: Select Box Madness

Reply #4 –

I really like what you did with select boxes for Wedge. Good job with that! ;)

The drop arrow looks a little unnatural there, Spuds.

Re: Select Box Madness

Reply #5 –

Would you like to see a different arrow or perhaps just some shading behind it?

Re: Select Box Madness

Reply #6 –

I think something to separate the arrow from the content might work. It also feels a little too wide.

By the way, it seems like you have made the changes for the default variant; I've been using the old one. Everything looks fine except for the search options at the top. See the attached screenshot. Also, jump to seems to be using the default styling. Is that intentional?

Re: Select Box Madness

Reply #7 –

Quote from: [SiNaN] – I think something to separate the arrow from the content might work. It also feels a little too wide.
Thanks, I'll try some other backgrounds and post some ideas.
Quote from: [SiNaNBy the way, it seems like you have made the changes for the default variant; I've been using the old one. Everything looks fine except for the search options at the top. See the attached screenshot. Also, jump to seems to be using the default styling. Is that intentional?
Humm ... well yes looks like I need to check the variant,  the arrow should not be over the select content (well expect for some cases in ie8/9).   I assume thats Safari 6.x?

I had just noticed the jump box, thats a miss on my part.  I also have to tweak the JS to show the select as disabled, thats not working (visually).

Re: Select Box Madness

Reply #8 –

Quote from: [SiNaN] – I really like what you did with select boxes for Wedge. Good job with that! ;)
Thanks! :)
I wasn't fishing for compliments, though it's always pleasant. O:-)

I'm only unhappy with the skin selector; the hierarchical design doesn't work well across all browsers, because not all fonts are rendered the same. I'm actually considering building a canvas on top of the selector to allow proper drawings instead... But that would take too long to code, and I don't have infinite days. ;)

Re: Select Box Madness

Reply #9 –

Quote from: Spuds – Humm ... well yes looks like I need to check the variant,  the arrow should not be over the select content (well expect for some cases in ie8/9).   I assume thats Safari 6.x?

You mean the browser? I think it's Chrome, lol. It looks pretty much the same in Safari too though.

Quote from: Nao – I'm only unhappy with the skin selector; the hierarchical design doesn't work well across all browsers, because not all fonts are rendered the same. I'm actually considering building a canvas on top of the selector to allow proper drawings instead... But that would take too long to code, and I don't have infinite days. ;)

There seems to be some room for improvement there indeed, but doesn't look like something anyone would complain about. I particularly like the fact that it has all those cool features but still looks like a select box.

Re: Select Box Madness

Reply #10 –

Well, that was the idea... There are other selectbox plugins that even look a bit better than mine, but they resort to more tricks to do that (and more tricks = more bytes.)
Of course, there are people who'll say that on mobile, these select boxes are not as usable as a fullscreen selectbox. Sure. But if I have to wait until Android and iOS implement icons in selectboxes, I'll never get anything done... :P