How to make list in webOS look like Grid?

Question

I tried 'float: left;', but when scrolling(slowly is clearer), only one list item scroll..but not numItem of one row..(But photos app built in palm pre ROM woks just fine)

In one file:

<div id="results-list" class='thumb-list' x-mojo-element="List"></div>

In another:

<ul>#{-listElements}</ul>

In another:

<li class='thumb-item'>
 <img src="#{-pic_idFormatted}"/>
</li>

The CSS:

/**
 * thumblist
 */
.thumb-list {
 padding: 12px;
}

.thumb-item {
 float: left;
 margin: 8px;
}

.thumb-item img {
 width: 80px;
 height: 80px;
 border-radius: 5px;
 border: 1px solid black;
}

The Script:

    this.resultsModel = {items: []};

this.controller.setupWidget('results-list', {
        itemTemplate:'thumb/search-result',
        listTemplate:'thumb/result-list',
        formatters:{pic_id:this.formatThumb.bind(this)},
        //renderLimit: 50,
        lookahead: 20,
        fixedHeightItems: true,
        initialAverageRowHeight:100,
        hasNoWidgets: true
    },
    this.resultsModel);

alt text

in the same grid

What exactly are you asking? Your question is very unclear as to the problem, what is the expected behavior? — Kyle, Sep 10 '10 at 08:23
You're welcome. When writing your questions, there are formatting tools to make your code visible, also tell us which snippets are in which files if they are not in one :) — Kyle, Sep 10 '10 at 08:31

score 0 · Answer 1 · answered Sep 10 '10 at 08:26

0

The <ul> should wrap <li>s:

<ul>#{-listElements}

<li class='thumb-item'>
 <img src="#{-pic_idFormatted}"/>
</li>

</ul>

But other than that, the rest of your question is very unclear.

answered Sep 10 '10 at 08:26

Kyle

65,599
28
144
152

ul and li is in diffrent html file(they are two template file)..It looks nice now.. but for some reason(maybe is something inside webOS), it is strange when scrolling..The result after scrolling is correct – Tsung.W Sep 10 '10 at 08:28
A live example would be great to see :) – Kyle Sep 10 '10 at 08:32
Hmm.. do you have a webOS develop enviroment? – Tsung.W Sep 10 '10 at 08:38
I don't, but most problems can be solved by looking at them :) – Kyle Sep 10 '10 at 08:43
I don't know how to make a live example...video??It's not a web app.It's on phone – Tsung.W Sep 10 '10 at 08:50
Ok, well we just need a better description of what you want to happen, and what is actually happening. – Kyle Sep 10 '10 at 09:04

How to make list in webOS look like Grid?

1 Answers1