jQuery Forum

OK, solved it using more involved CSS.

giving the first <li> item the class name li-first I put the following in a CSS file:

1. .li-first .ui-btn-text {
       text-align:center;
   }
   
   .li-first .ui-icon {
       visibility:hidden;
   }
   

Hopefully someone else finds this useful.

Just what I needed!

Thanks!

why don't you make the element a list-divider - http://jquerymobile.com/test/docs/lists/lists-divider.html

A list divider just brings a whole different look, and structure!  When people ask these kinds of questions, it isn't because they haven't thought about it and simply missed a simple solution. I need this to match the rest of the application.  As a designer, I need the freedom to tweak the underlying controls--not change it entirely to simply get it to function.  The look is paramount to make this fit with what the client is expecting.

First off, there is no such thing as a collapsible jQuery Mobile listview. Without seeing an example (which is pretty key to getting a meaningful answer here) t's unclear to me what you are talking about.

You can place a listview inside a collapsible or a several listviews inside a collapsible set, as documented here:

http://jquerymobile.com/demos/1.2.0/docs/lists/lists-collapsible.html

Is that what you are doing?

But anyway...

You want a header for the list. That is exactly what a list divider is meant for. You don't like the look? Then change it with CSS. The JQM authors couldn't have possibly anticipated exactly what your client would want on your particular project. That is stretching quantum physics beyond believability! ;)

Why are you including an <a> tag on an item that is meant to be a heading? (Again, I am guessing a bit here, because you have only given us a vague description without an example).

Do you want the item to act like a button, changing color when they tap it? If not, then don't include the <a> tag! You are free to omit the <a> tag on any item, and it will look just like a regular list item that doesn't have a link.

Now, viola! No button action (which presumably you do not want). AND no disclosure arrow (this is what I assume you mean by "icon", but again, you make us guess), because disclosure arrows only appear on items that have <a> tags.

If you include the <a> tag, then it will both have a raised "button" look (by default, at least) and will react to touch like a button (highlighting on hover).

If you DO want it to act like a button, that's confusing and irrational. However, clients often want things that are confusing and irrational, understood. But don't expect JQM to easily accommodate confusing and irrational use cases.

Again, you will protest, (and I know you will...) that it doesn't look as you wish. And I will again invoke quantum physics. Alas, once again, your irrational client's desires and JQM's design are not entangled.

So, you will have to use some CSS to make it look as you wish. Fortunately, items that don't have an <a> tag are are lot simpler both structurally and in the backing CSS, and are quite easy to format any way you'd like.

> Without seeing an example (which is pretty key to getting a meaningful answer here) t's unclear to me what you are talking about.

Which is why it is strange frequent commented the way he did.

I won't pretend that I solved this problem in the best way. This was my first, and only project I did with jQuery mobile--a year ago!

No one is or was expecting JQM authors to anticipate everything. At one time certain commands worked, then in the next revision would change things. JQM was new, the convoluted use of javascript, and CSS made it difficult to anticipate just what changes should be made to get what I needed.

This is not a criticism of JQM authors either. They and I both had all kinds of problems getting JQM to function appropriately and consistently at the time--hence the long explanations after each revision.

I can't remember specifically why I used the button look. But I know for sure at the time there was no other way I could get it to work consistently across platforms.

I haven't looked recently, but I assume JQM has matured--although the real problem for jQuery seems to be poor and uneven javascript performance. Maybe the tweak I performed is better solved another way, or even unnecessary.  Someone found it useful and I have moved on.