Question

Alright, so I have 2 buttons inline in my header with an HTML structure like this:

    <div id="applicationHeader" data-role="header"  data-theme="b">
        <h1 id="chatHeader" class="ui-title" tabindex="0" role="heading" aria-level="1">Room</h1>
        <a id="chatroomBackButton" href="#listOfChatsPage" class="ui-btn-left" data-role="button" data-icon="back"   data-transition="reverse slide">Back</a>
        <div data-type="horizontal"  class="ui-btn-right">
            <a role="button" aria-haspopup="true"  class="ui-btn-inline" style="margin-right:10px" >                    
                <select id="additionalOptions" data-icon="plus" data-iconpos="notext" data-native-menu="false">
                    <option id="addTask" value="0" href="#taskEntryPage">Add Task</option>
                    <option id="fetchMessages" value="1">Get More Messages</option>
                </select>
            </a>
            <a role="button" aria-haspopup="true"  class="ui-btn-inline ">
                <select id="subchatList" data-icon="grid" data-iconpos="notext">
                    <!--<option value="0">Main Chat</option>-->
                </select>
            </a>
        </div>

    </div> <!--end header-->

but for some reason, when I upgraded to 1.1, the data-iconpos="notext" no longer renders the icon. Here is a jsfiddle link: Example

Any help would be greatly appreciated, I have been struggling with this for eons. Thanks!

Answer 1

Add data-mini="true" to your select tags and that should correct your problem.