Question

i am doing a mobile version of a website using JQuery Mobile and JSON for fetching the data. The problem that i have is that when you open the website with your mobile the DIVs that are with data-role="collapsible" have a fixed height wich means if the title is “This is the title of the news” in the mobile you see “This is the title…” How can i change that height?

Answer 1

The height is not specified, but a property is set so that the text for the headers of collapsible elements are one-line. All you need is to tweak a bit of CSS:

.ui-page .ui-content .ui-collapsible .ui-btn-inner {
    white-space : normal;
}​

Here is a demo: http://jsfiddle.net/yvJ93/

By default jQuery Mobile applies white-space : nowrap to collapsible headers which makes them single-line.

Also, here is some good reading for white-space: https://developer.mozilla.org/en/CSS/white-space