locked
stupid question: what I missing for a simple grid layout

    Question

  • Hello guys. Ok, here's the deal: I know I'm missing something, but what? I can't see anything in a page with this simple example. The objetive is to use a simple grid layout:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>gridlayout</title>
        <!-- WinJS references -->
        <link rel="stylesheet" href="/winjs/css/ui-light.css" />
        <script src="/winjs/js/base.js"></script>
        <script src="/winjs/js/wwaapp.js"></script>
        <!-- gridlayout references -->
        <link rel="stylesheet" href="/css/default.css" />
        <script src="/js/default.js"></script>
    </head>
    <body>
        <h1>Utilização do layout grid</h1>
        <div id="formulario">
            <label id="labelNome" for="nome">Nome:</label>
            <input type="text" id="nome" />
            <label id="labelMorada" for="morada">Morada:</label>
            <input type="text" id="morada" />
        </div>
    </body>
    </html>

    And I'm using this css file:

         

    body {
        height: 100%;
         width:100%;
    }
    #formulario {

         display: -ms-grid;
         -ms-grid-columns: auto auto;
         -ms-grid-rows: auto auto;
    }
    #labelNome {
        -ms-grid-column: 1;
        -ms-grid-row: 1;
    }
    #nome {
        -ms-grid-column: 2;
        -ms-grid-row: 1;
    }
    #labelMorada {
        -ms-grid-column: 1;
        -ms-grid-row: 2;
    }
    #morada{
        -ms-grid-column: 2;
        -ms-grid-row: 2;
    }

    Can anyone tell me what is it I'm missing? thanks.


    Luis Abreu

    Sunday, February 12, 2012 8:17 PM

Answers

  • Hi Luis,

    grid layout requies the elements to be block elements.  Apply this to the CSS styles:

     display: block;

    -Jeff

    Jeff Sanders (MSFT)

    Tuesday, February 14, 2012 2:43 PM
    Moderator
  • Hi Luis,

    I agreed with Jeff, The basic building block of Grid Alignment is the Grid element, which is declared by setting the display property of an element to -ms-grid.
    From http://msdn.microsoft.com/en-us/library/hh673533(v=vs.85).aspx.

    However, there is no suitable display property value for label.
    From: http://msdn.microsoft.com/library/ms530751.aspx

    At last, I suggest you to use div or div wrapper the label control in a Grid.

    Best regards,
    Jesse


    Jesse Jiang [MSFT]
    MSDN Community Support | Feedback to us

    • Marked as answer by Bob_Bao Tuesday, March 06, 2012 2:36 PM
    Wednesday, February 15, 2012 9:31 AM
    Moderator
  • Hi Luis,

    My friend, your english is awesome!  I am the one who should have been in class instead of playing soccer... I would have better listening skills!

    I really dove into the spec here to get your answers:

    http://dev.w3.org/csswg/css3-grid-align/#grid-items

    You will see that the requirements are not inlined but as follows:

    "The Grid element performs layout on Grid Items. Block-level children, replaced, inline-block children, and atomic, inline-level children of the Grid are considered Grid Items.

    Contiguous runs of non-replaced, inline content are wrapped in an anonymous, block-level box, which is then treated as a Grid Item for the purposes of Grid layout. "

    So, inlined elements must be wrapped in a block style.  Your <input> tag also needs to be wrapped because it is not block.

    Almost everyone using grid has simply wrapped what they wish to display in a <div> since it is display:block already.  For that matter you do not need to use a <label> in your code, simply use a <div>

    I hope this helps and thanks for asking for clarification because I learned something as well!

    -Jeff


    Jeff Sanders (MSFT)

    Friday, February 17, 2012 1:48 PM
    Moderator

All replies

  • Ok, I've managed to pin down the problem to the label. If I replace it with a div, everything works out.

    Any clues on why this happens?


    Luis Abreu

    Sunday, February 12, 2012 10:01 PM
  • Following is the link you may find good knowledge about Grid Based Web Design in HTML 5

    http://line25.com/tutorials/create-a-grid-based-web-design-in-html5-css3

    Monday, February 13, 2012 4:55 AM
  • Hello.

    Not really what I want. I just need to know why labels can't be positioned in a grid cell. Am I missing something? Did I do anything wrong? the example seems really simple and contrived, so I expected it to work without any problems. Unfortunately, it doesn't and  I need to understand why.


    Luis Abreu

    Monday, February 13, 2012 9:45 AM
  • Hi Luis,

    grid layout requies the elements to be block elements.  Apply this to the CSS styles:

     display: block;

    -Jeff

    Jeff Sanders (MSFT)

    Tuesday, February 14, 2012 2:43 PM
    Moderator
  • Hi Luis,

    I agreed with Jeff, The basic building block of Grid Alignment is the Grid element, which is declared by setting the display property of an element to -ms-grid.
    From http://msdn.microsoft.com/en-us/library/hh673533(v=vs.85).aspx.

    However, there is no suitable display property value for label.
    From: http://msdn.microsoft.com/library/ms530751.aspx

    At last, I suggest you to use div or div wrapper the label control in a Grid.

    Best regards,
    Jesse


    Jesse Jiang [MSFT]
    MSDN Community Support | Feedback to us

    • Marked as answer by Bob_Bao Tuesday, March 06, 2012 2:36 PM
    Wednesday, February 15, 2012 9:31 AM
    Moderator
  • Hello guys.

    First, let me start by thanking you for the answers.

    NOw, a couple of questions :)

    Jeff, you say that grid elements need to be block elements, right? If that is the case, then:

    1. why does the ms docs on grid say that "Grid elements can be block-level or inline-level" (http://msdn.microsoft.com/en-us/library/hh673533(v=vs.85).aspx)?

    2. aren't input inline elements? in that case, why don't I have to set the input display to block in order to see it on the grid layout?

    thanks.


    Luis Abreu

    Wednesday, February 15, 2012 12:03 PM
  • Hi Luis,

    Yes you are correct.  Set the label to block and input can be left without and attribute.

    -Jeff


    Jeff Sanders (MSFT)

    Wednesday, February 15, 2012 12:43 PM
    Moderator
  • Hello again Jeff.

    Ok, I'm assuming you won't be able to tell me if this is a bug and if it will be fixed in the next version, so I'll assume that this is *really* a bug in the current implementation :)



    Luis Abreu

    Wednesday, February 15, 2012 9:44 PM
  • Hi Luis,

    I do not think we are communicating well.  What do you think is the bug?  This behaves the way the documentation says it should.  Could you be specific?

    Input is an inline element so you do not have to set block on it.  The documentation says it has to be block or inline.  I seem to not be understanding you well, sorry.

    -Jeff


    Jeff Sanders (MSFT)

    Thursday, February 16, 2012 9:05 PM
    Moderator
  • Hello again Jeff.

    Yes, it seems like I should have spent more time in my english classes instead of having fun playing soccer :)

    Let me try to explain it again. You said I needed to change the css display property of my labels by setting it to block, right? So, I've went ahead and asked if this was a bug because input elements are also inline elements (right?) and they are shown in the grid without changing their css display property.

    So, I've went to the online IE10 docs and sent you the previous link which says that elements placed inside the grid can be inline or block elements. That being the case and since a quick search for label didn't return anything in that page, I don't understand why label elements can't be placed inside a grid layout without changing its display property.  

    In other words, if label and input are both inline elements (unless I'm mistaken), why do I need to change the display property of label so that it gets shown in a grid layout?

    that' swhat I'm asking...


    Luis Abreu

    Friday, February 17, 2012 9:54 AM
  • Hi Luis,

    My friend, your english is awesome!  I am the one who should have been in class instead of playing soccer... I would have better listening skills!

    I really dove into the spec here to get your answers:

    http://dev.w3.org/csswg/css3-grid-align/#grid-items

    You will see that the requirements are not inlined but as follows:

    "The Grid element performs layout on Grid Items. Block-level children, replaced, inline-block children, and atomic, inline-level children of the Grid are considered Grid Items.

    Contiguous runs of non-replaced, inline content are wrapped in an anonymous, block-level box, which is then treated as a Grid Item for the purposes of Grid layout. "

    So, inlined elements must be wrapped in a block style.  Your <input> tag also needs to be wrapped because it is not block.

    Almost everyone using grid has simply wrapped what they wish to display in a <div> since it is display:block already.  For that matter you do not need to use a <label> in your code, simply use a <div>

    I hope this helps and thanks for asking for clarification because I learned something as well!

    -Jeff


    Jeff Sanders (MSFT)

    Friday, February 17, 2012 1:48 PM
    Moderator
  • Hello again Jeff.

    I still think the problem is mine :)

    hum...but, but, but shouldn't I at least see the item?

    According to what I understood from the spec (again, I may have got it wrong!), the only thing it says is that inline items will be automatically wrapped by an anonymous block element.  Is there anything else which says that non positioned block elements should be removed from where they are? For instance, I've tried adding divs inside the grid without setting their cell position and they were all positioned on the first cell...

    Interestingly, replacing div with span results in the same error: it won't get displayed...

    I really don't like the div wrapping idea...I think changing the display (as you suggested before is really a better option)


    Luis Abreu

    Friday, February 17, 2012 2:53 PM