Trouble setting ul and li properly in html and css

Question

I have a listview using JQuery Mobile.

This is what it looks like on mobile .

I want the height of each li of the listview to grow automatically to accomodate the information and I also need the listview to be scrollable.

I found that if I give a fixed height to the listview, it becomes scrollable in both directions. But I want it to be only vertically scrollable and not horizontally.

I tried increasing the height of each li in the listview in my css, but the text would still only be displayed horizontally and it wont be contained within the li height and width.

If i change the overflow property, then the scrollable behaviour disappears.

What do I need to do?

Below is my css for the listview:

.listview-container
{
  margin-left: 25px;
  margin-right: 25px;
  max-height: 300px;
  overflow: scroll;
  width: 100%;
}

.logsView-scroll
{

  -webkit-overflow-scrolling: touch;
}

.listview-li
{
  display: inline-block !important;
}

The html bit for the listview:

<div class="listview-container">
    <ul id="chickenLog" data-role="listview" class="logsView-scroll">
    </ul>
</div>

PS the li elements are programmatically appended through jquery by cloning the below template:

<ul id="chickenLog" data-role="listview" class="logsView-scroll">
    <li class="listview-li" id="aLog" data-theme="a"><span id="text"></span> 
    </li>
</ul>

li after it is appended

Answer 1

Conclusion:

The li elements are display: inline-block; , this will cause them to go next to each other and overflow. You can get them to stack on top of one another by changing the display style to block .

Secondly, the li elements themselves have a span with the text inside. This will also overflow, so you need to give either your li the style white-space: normal; so the span can inherit this property or directly add it to your span .

( Note: When using libraries, they can often include their own CSS . So if you've put some styles on an element and they don't seem to be showing, this could be due to the fact that the library is overriding it. To combat this, you can put !important on the end of a style.)

Example:

.listview-li {
    display: block;
    white-space: normal !important;
}