locked
Binding template sees images size before CSS style rules are applied

    Question

  • I have a simple JSON data source with URLs to images that are about 420px.

    If I use this mark up (notice the inline image size)...

    <div id="template" data-win-control="WinJS.Binding.Template"> <div> <img data-win-bind="src:imageUrl" style="width:20px;height:20px;" /> <p class="name" data-win-bind="innerText:name"></p> <p class="location" data-win-bind="innerText:location"></p> </div> </div> <div id="list" data-win-control="WinJS.UI.ListView"></div>

    ...then my list looks as expected with the individual items sized to match the content within.

    But if I use the same markup but omit the style="width:20px;height:20px" and instead apply this style rule...

        #list .win-container img {
            border:solid 1px green;
            width:20px;
            height:20px;
        }
    

    ...the list is not displayed as I would expect. It's as if the list was drawn considering the images' size *before* the style rule was applied. I see squares that are large enough to contain 420px images, but the images are only 20px. I know the style is getting applied because I have the green border that I specified.

    What's going on here?

    Thursday, June 7, 2012 3:09 AM

All replies

  • Of interesting note... when I change my style rule to reference the image more directly by its class instead of using #list .win-container img it works as it should.
    Thursday, June 7, 2012 3:20 AM