The Problem

I noticed that dropdown boxes (<select> html elements with <option>’s) on Motorola phones were being shown as a list, instead of as the usual dropdown list that we are used to.

Normal dropdown box html	How a dropdown box should look like
<select> <option value="CellC">CellC</option> <option value="MTN">MTN</option> <option value="Vodacom4me">Vodacom</option> <option value="Virgin">Virgin Mobile</option> </select>	CellC MTN Vodacom Virgin Mobile

Motorola shows it “wrongly” like this instead:

CellC
MTN
Vodacom
Virgin Mobile

Which does waste a lot of space on the limited screen size of a mobile cellphone.

The Solution

Fix Method 1: Leave out the closing /option tags

This is the easiest way to fix, although it doesn’t make the markup XHTML, it is still valid HTML.
You have to leave out the closing OPTION tags.

Like so:

<select>
<option value="CellC">CellC
<option value="MTN">MTN
<option value="Vodacom4me">Vodacom
<option value="Virgin">Virgin Mobile
</select>

That’s it, the Motorola will then display the dropdown as a normal PC browser would.

Fix Method 2: Add a Optgroup

In HTML there is a cool <optgroup> tag. Which allows you to group items in a dropdown list.
Example:

        
v3
v360

        
        
6230i
7250i

        

So, to get the motorola to display a dropdown list as we would like it to, we just have to add one <optgroup> element to the <select>ion box.

Like this:

<select>
<optgroup>
<option value="CellC">CellC</option>
<option value="MTN">MTN</option>
<option value="Vodacom4me">Vodacom</option>
<option value="Virgin">Virgin Mobile</option>
</optgroup>
</select>

In PHP before generating the “option” tags I check if it’s a Motorola phone and do this:
if (strstr($_SERVER['HTTP_USER_AGENT'], "MOT-")) {
echo '<optgroup>';
}
And remember to close it afterwards.

The Tools

Motorola actually has a browser / internet / xhtml / html-mobile / wml /wap simulator-emulator program so that you can test how your webpage / wappage will look on a Motorola.
It’s called the Motorola ADK (Application Developer Kit).

ADK Features

* Supports WML, cHTML and xHTML-basic
* Syntax Directed Editor and Script Debugger
* WML Script Compiler: 1.2.1 Compliance
* WML Script Debugging
* Incorporates actual browser components – to achieve Realistic Simulation capabilities across Motorola and other devices

Download the Motorola E398 ADK. Requires Login / registration first. Get Skip Registration here or Download Moto ADK directly.
The actual cellphone model / version of the ADK doesn’t matter as their browser is pretty much the same across all the phones. (V3, V3x razr, renders the same way as MOT-E398)

Happy testing!

I came across this problem because the contact quick list I have on my free sms sites (CellC, MTN, Vodacom) weren’t showing nicely on Motorolas. Now that’s all fixed

UPDATE: Added a new workaround. (exclude the closing </option> tags)

Someone needed help with this topic, which pushed me to write up something on writing mobile phone programs.
I mean, if you help one person why not make the information available for everyone? That will save the next person from going through all the same unnecessary gripes.

It’s always like that. No-one will create something that has a zero demand.

Anyway, back to the reason for this page – cellphone development.

Most cellphones use a mini java VM mostly referred to as the J2ME. So, you need to write the game or application in the Java language basically.

The tools available are neat – read more on the page :: http://www.defza.com/wordpress/development/j2me-tutorial/