I'm trying to create a small button (an options button) that when clicked opens up a menu of options. However the size of the content when not collapsed is the same size of the button I'm trying to increase the size of the li's. I have already added this in my style to set the width of the button. I want the button to be a reasonable size that opens up into larger content.
How do I increase the size of the LI's inside the div without changing all li's in my document.
.ui-collapsible {
width:130px;
}
<div data-role="collapsible" data-collapsed-icon="gear" data-expanded-icon="gear">
<h4>Options</h4>
<ul data-role="listview" data-inset="false">
<li>Read-only list item 1</li>
<li>Read-only list item 2</li>
<li>Read-only list item 3</li>
</ul>
</div>
The collapsible widget is not really designed for this. I think you are better off using the popup:
<a href="#myMenu" data-rel="popup" data-transition="slideup" class="ui-btn ui-btn-inline ui-icon-gear ui-btn-icon-left">Options</a>
<div data-role="popup" id="myMenu">
<h4>Options</h4>
<ul data-role="listview" data-inset="false">
<li>Read-only list item 1</li>
<li>Read-only list item 2</li>
<li>Read-only list item 3</li>
</ul>
</div>