Inline-block listview in flyout

Question

I have this problem: I have a this flyout:

<div id="formatTextFlyout" data-win-control="WinJS.UI.Flyout" 
            aria-label="{Format text flyout}">
        <div id="flyoutList" data-win-control="WinJS.UI.ListView" 
                data-win-options="{itemDataSource : Data.flyOutData.dataSource,
            itemTemplate: select('#routeDetailsTemplate'),
            oniteminvoked: Commands.navigateListViewTrainItem,
            selectionMode: 'none',
            layout : {type: WinJS.UI.ListLayout}
            }"></div>
        <img src="../../images/logo.scale-180.png" />

    </div>

And both the listview and the imaget have style="display: inline-block" (in the css file). Now the image appears, but the listview disappears when I set it's display: inline-block. I tried to wrap the listview in another div and giving the wraper display: inline-block, but the same thing happens. Any idea how I could achieve this?

P.S the flyout has an event listnere like this:

flyout.addEventListener("beforeshow", function (event)
            {
                var insideFlyoutListView = element.querySelector("#flyoutList").winControl;
                insideFlyoutListView.forceLayout();
            });

Answer 1

Do some thing Open the DOM explorer and try setting the display and check for the contents there.

Here's a link how to go to DOM Explorer

Dom Explorer VS2012

Please check for the list view element it will be rendered as a div with class win-surface and all. Now try setting height width display and positioning from the DOM explorer

Note : Figuring out you problem with this little piece of code specially Design issues is not possible. best way you give a try. If not possible Then reply back.