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

    General discussion

  • Actually I'm pretty sure it is a bug, I'm just being nice :)

    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. 

    That is a bug, right? 


    http://bit.ly/sebagomez


    Thursday, August 2, 2012 3:32 PM

All replies

  • Hi Sebastian,

    I understand your scenario. Actually MSDN states the "start" property as the Default, however if you notice below in that same link the initial value is marked as "stretch". The "stretch" value is the initial default value if you do not specify anything, so I will look into this and get back to you (if it is a doc bug).

    If you use the following <div> items where the background-color can be replaced with your intended color, you will notice that the image gets clipped at the desired height of the <div> with the various alignments:

        <div style="width:300px;display:-ms-grid;-ms-grid-rows:100px 45px 44px;border: black 1px dashed;">
            <div style="-ms-grid-row:1; -ms-grid-column:1;border: red 1px dashed;background-color:#3E790A;z-index:2;">hola mundo top</div>
         <div style="-ms-grid-row:2; -ms-grid-column:1;border: blue 1px dashed;-ms-grid-row-align: start;z-index:1;/**/"><img style="max-width:100%;max-height:100%;" src="/testImg.png"/> </div>
         <div style="-ms-grid-row:3; -ms-grid-column:1;border: white 1px dashed;background-color:#3E790A;z-index:2;">hola mundo bottom</div>
        </div>

    In my case the background-color of my body is #3E790A, you can check it out yourself.

    Thanks,

    Prashant.

    Friday, August 10, 2012 12:24 AM
    Moderator
  • 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>
    Friday, August 17, 2012 1:22 AM
  • Thanks Erik

    http://bit.ly/sebagomez

    Friday, August 17, 2012 3:50 PM