This seems like it should not be that difficult, but I cannot do either of these. On the first item in my collapsible listview I want to remove the icon (it does not link to anywhere, just '#') and center the text. It acts like a header for the list. If you're thinking that the collapsible list item above should act that way, it cannot in this case because it is a question.
I had read somewhere that setting "data-icon" to anything other than the set of icons in JQuery Mobile would make the icon disappear.
data-icon="none", data-icon="noicon", data-icon="null" does not work in CSS or the <li> tag, although it does change the icon to +.
Setting text-align:center in CSS, or style="text-align:center" in the <li> tag doesn't work either. Something must be overriding these commands.
I also tried to just make a text header in the <li> tag, but this conflicted with other CSS commands covering the page and body. At one point it worked this way, but as I kept going other problems arose with the app.
Can someone help, or is there another way to do this?
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:
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!
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.
Leave a comment on penguin71's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic