locked
ListView in Application Bar that takes up most of space

    Question

  • I have put a ListView into a top application bar and I want the bar to take up the available space to the right of the win-left buttons.  How can I do this? (using display: -ms-grid doesn't work)

        <div id="navbar" data-win-control="WinJS.UI.AppBar" aria-label="Navigation Bar" data-win-options="{position:'top',transient:true,autoHide:7000,lightDismiss:true}">
            <!-- Navigation Section -->
            <div class="win-navigation">
                <button id="home" class="win-command">
                    <span class="win-commandicon win-large">&#xE10F;</span><span class="win-label">Home</span>
                </button>
                <button id="map" class="win-command">
                    <span style="font-family: Webdings; font-size: 24pt;" class="win-commandicon win-large">
                        &#xFE;</span><span class="win-label">Map</span>
                </button>
            </div>
            <div class="win-right">
                <div data-win-control="WinJS.UI.ListView" id="PhotoList"  data-win-options="{itemRenderer: PhotoItemTemplate}">
                </div>
            </div>
        </div>
    
    


    Michael S. Scherotter
    Principal Architect Evangelist Microsoft Corporation,
    Blog, Twitter, Facebook

    Tuesday, January 03, 2012 3:35 PM

All replies

  • Hi Michael,

    Without having data and your template it is difficult to tell what is happening.

    Pull up the DOM explorer and check the styles in there.  See if you can tweak the styles to get your desired effect.  At that very least you should be able to see why the Listview is not taking up the space you desire.

    -Jeff


    Jeff Sanders (MSFT)
    Tuesday, January 03, 2012 4:14 PM
    Moderator