Customizing SMF > SMF Coding Discussion

Funky dropdowns

(1/4) > >>

ChalkCat:
I have just looked at the dropdowns on my forum from all browsers on my PC and they all look like the first two attachments.  However, as you see in the other attachments, when I view on my iPhone, they look soooo much smarter!  Why do they look so much better on my iPhone and what do I need to do to make them look like this on PC browsers as well?  Thanking you :)

Arantor:
The dropdowns are handled by the browser, and reimplementing them to be consistent in all browsers is a massive, massive amount of work - and many things break.

ChalkCat:
Oh  :(

That's what I was afraid of...  They do look fab on the iPhone though don't they? ;)

Thanks for the quick reply :)

Arantor:
*shrug* I'm personally not that bothered, they all look pretty similar because they all do the same basic job.

I would note that the software I work on did actually reimplement selectboxes in its own code and the number of things that broke was phenomenal, we're still finding places it doesn't work properly.

MrPhil:
There are a couple of things you could look at, if you want to go through the effort of making desktop browsers look like a smartphone browser. I offer no promises as to whether they're even feasible:

* Play with various CSS settings like rounded corners for the <select> statement, to see if you can replicate the look. It looks like SMF is using pretty much plain vanilla settings, so maybe you can do something. I don't know if there's any way to replace the "open" button with a different graphic.
* Rewrite the <select> widget with a massive amount of HTML, CSS, and Javascript, to use a <div> box with rounded corners and your own "open" button graphic. That is, you might no longer even have a <select> tag, but a <div> with a lot of Javascript to emulate a <select> when you click on it. I'm guessing that's what @Arantor did, and it's probably a lot of work.Rather than starting from scratch, I would suggest googling around to see if and how other site designers have tackled this. Maybe there's something in the jQuery library that would be useful.

Navigation

[0] Message Index

[#] Next page