Question

I am using a grouped-buttons-widget and a listview-widget. My code is

<div data-role="controlgroup" data-type="horizontal" class="ui-corner-all ui-controlgroup ui-controlgroup-horizontal">
    <div class="ui-controlgroup-controls" align="center">
        <!-- ........ -->        
    </div>        
</div>

<ul data-role="listview" id="mylist">
    <li data-role="list-divider" role="heading" data-theme="b">
        Sheet: Untitled1
    </li>
    <!-- ........ -->
    <li id="mylistSummary" data-role="list-divider" role="heading" data-theme="b">
        Total:
    </li>
</ul>

The problem is now the widgets appear just next to each other without any spacing in between.

What should I do to ensure desired space between these (and perhaps other) widgets?

Answer 1

I think you may try to add a simple <br> to separate the 2 components:

<div data-role="controlgroup" data-type="horizontal" class="ui-corner-all ui-controlgroup ui-controlgroup-horizontal">
    <div class="ui-controlgroup-controls" align="center">
        <!-- ........ -->        
    </div>        
</div>

<br>

<ul data-role="listview" id="mylist">
    <li data-role="list-divider" role="heading" data-theme="b">
        Sheet: Untitled1
    </li>
    <!-- ........ -->
    <li id="mylistSummary" data-role="list-divider" role="heading" data-theme="b">
        Total:
    </li>
</ul>

Or you may try to play with margin-bottom, for example, try the following:

<div style="margin-bottom: 5px;" data-role="controlgroup" data-type="horizontal" class="ui-corner-all ui-controlgroup ui-controlgroup-horizontal">
    <div class="ui-controlgroup-controls" align="center">
        <!-- ........ -->        
    </div>        
</div>

<ul data-role="listview" id="mylist">
    <li data-role="list-divider" role="heading" data-theme="b">
        Sheet: Untitled1
    </li>
    <!-- ........ -->
    <li id="mylistSummary" data-role="list-divider" role="heading" data-theme="b">
        Total:
    </li>
</ul>

Hope this helps.

Let me know if these solutions work for you.