Motorola wap dropdown list (<select>) + Motorola ADK

OK, Motorola’s wap / xhtml browser on their phones has a few issues. (Scrolling issue I pointed out)

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>

Motorola shows it “wrongly” like this instead:

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:

HTML Source Normal Output
<select>
<optgroup label="Motorola">
<option value="v3">v3</option>
<option value="v360">v360</option>
</optgroup>
<optgroup label="Nokia">
<option value="6230i">6230i</option>
<option value ="7250i">7250i</option>
</optgroup>
</select>

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)



3 Comments »

  1. Ganesh Said,

    February 7, 2007 @ 10:51 am

    i want to see how the webpage looks in the motorola when i give the address so i want the simulator can u provide me please
    —–

    Hi, the motorola webpage simulator is found here: Motorola E398 Simulator.
    Requires Login / registration first. Get Skip Registration for developer.motorola.com here.

    Or download the Simulator here: Download Moto ADK directly from defza.com.

    This is mentioned in the article above: defza.com/wordpress/mobile-cellphone/motorola-wap-dropdown-list-select-motorola-adk

  2. Marlon Said,

    December 20, 2007 @ 4:09 am

    Motorola browsers suck…

    Anyway, I was looking for a solution for this problem for some time, and I’m glad I finally found it here! Thanks!

  3. argIM Said,

    December 24, 2007 @ 2:21 am

    However, if you have 2 SELECT elements, the SECOND ONE will show properly as a drop-down list, while the first will be shown as a full list. If this isn’t a BUG, I don’t know what it is.

    Also, there’s a combination of elements that when added before the SELECT list, will cause the list to be shown properly as well. I cound’t determine which elements exactly, but a series of labels and inputs will “fix” the select element magically. This is most certainly annoying.



Say/Suggest/Fix/Ask something