CODEWITHSUNDEEP
csswindows-8microsoft-metrowinjs
sebagomez
sebagomez

Reputation: 9609

Possible bug in -ms-grid-row-align property

I have the following code where the image is higher than 44px:

<div style="width:300px;display:-ms-grid;-ms-grid-rows:44px 44px">
    <div style="-ms-grid-row:1; -ms-grid-column:1;/*-ms-grid-row-align: start;*/">
        <img style="max-width:100%;max-height:100%" src="/picture000.png"/> </div>
    <div style="-ms-grid-row:2; -ms-grid-column:1">hola mundo</div>
</div>

this shows the image re-sized to the div keeping its aspect (what i expect), but, if you uncomment the ms-grid-row-align property and set its value to start (its default value according to http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh466348.aspx) the image is shown full size.

Is that a bug or should I be using that property with another I'm not aware of?

p.s: I asked this same question on the MSDN Metro Style apps with absolutely no answers

Upvotes: 0

Views: 1465

Answers (1)

Erik Anderson
Erik Anderson

Reputation: 106

First of all: the initial value is "stretch" and not "start"; that's a doc bug. Setting it to "start" is actually changing the value from "stretch."

This is actually not a bug. The behavior you're seeing is because when the image's percentage-based max-height is being determined, the parent's (the grid item's) height is not yet defined. The result is that it is treated as "max-height: auto", which results in the large image.

This also explains why you get the smaller image when the grid item's -ms-grid-row-align value is set to "stretch". When set to "stretch", the grid item's height is set to the height of the row (44px in this case), and the image's percentage-based max-height can be resolved against that value.

You can see the same behavior without the use of the Grid:

<div style="max-height:100px;"><img id="img" style="max-height:100%" src="/picture000.png"/></div>

While your description doesn't fully explain why you're trying to do, you might want to consider making the image itself a grid item which will allow its percentage max-height value to resolve against the grid row itself. Note that you will want to add "-ms-grid-column-align: start" as well to ensure it doesn’t stretch and become non-proportional:

<div style="width:300px;display:-ms-grid;-ms-grid-rows:44px 44px">
    <img style="max-width:100%;max-height:100%;-ms-grid-row:1;-ms-grid-column:1;-ms-grid-row-align: start;-ms-grid-column-align: start;" src="/picture000.png"/>
    <div style="-ms-grid-row:2; -ms-grid-column:1">hola mundo</div>
</div>

Disclosure: I am on the team that worked on Microsoft's implementation of the CSS Grid.

Upvotes: 2

Related Questions