x-layout not working? - Githubissues

ghost commented 11 years ago

Trying to use an x-layout to create a header bar, a section of content, and a footer bar (like in the example); however, I can't get it to work properly. The entire page scrolls, including the header/footer bars. This works on the demo page, but for some reason I cannot recreate it on my own. Tried with both the BYOB and the full release.

Example:

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <link rel="stylesheet" type="text/css" href="brick-1.0beta8.css">
        <script src="brick-1.0beta8.js"></script>
</head> 
<body> 
    <x-layout>
        <header>Test</header>
        <section>Content</section>
        <footer>Test</footer>
    </x-layout>
</body>
</html>

HiggsOfChaos commented 11 years ago

Same issue. Mine displays differently in Firefox and Chrome. Chrome does not even show the content between the header and footer at all

ghost commented 11 years ago

@xkape glad I'm not the only one. Was worried that it might just be user error.

sole commented 11 years ago

Hi guys

You might need to do a

html, body {
   height: 100%;
}

too.

HiggsOfChaos commented 11 years ago

Still not working.

HiggsOfChaos commented 11 years ago

x-layout is probably the most useful component of Bricks. Sad to see its not working for me.

ghost commented 11 years ago

@sole I can verify that this does not work:

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="brick-1.0beta8.css">
    <script src="brick-1.0beta8.js"></script>
    <style type="text/css">
    html, body {
        height: 100%;
    }
    </style>
</head> 
<body> 
    <x-layout>
        <header>Test</header>
        <section>Content</section>
        <footer>Test</footer>
    </x-layout>
</body>
</html>

sole commented 11 years ago

So I did two changes in your code, and it works for me.

I added an x-appbar that contains the header element
I added some background colour to the content so you can see that it fits all the remaining space in the window

Have a look here: http://people.mozilla.org/~spenades/brick/layout/

ghost commented 11 years ago

@sole that does work, but shouldn't it work without using an Appbar? I just can't figure out why it doesn't work in my example, but it works here: http://mozilla.github.io/brick/demos/layout/index.html

Also, why isn't the Appbar within a header element in your example? As per the docs, shouldn't it be:

<x-layout>
    <header>
        <x-appbar>
            <header>TITLE</header>
        </x-appbar>
    </header>
    <section></section>
    <footer></footer>
</x-layout>

sole commented 11 years ago

I added an appbar because... that element triggers the proper css for you to get the layout you're looking for.

And you shouldn't put a header inside a header--what's the point? Think of the semantics. The x-appbar gives layout and contains the header. If the docs say otherwise they should be corrected, but I don't see that here: http://mozilla.github.io/brick/demos/appbar/index.html

Could you tell me where did you see that? So we can fix it...

sole commented 11 years ago

Anyway here's an example without x-appbar and it works all the same: http://people.mozilla.org/~spenades/brick/layout/index2.html

:-)

potch commented 11 years ago

@dtk An important thing to note about x-layout as it currently works: x-layout does not provide a fixed header and footer. It uses flexbox to ensure the

inside of it takes up all remaining room not used by the

and

. This means that if you have enough content inside the

that the page scrolls, the whole will scroll (as you've observed). To fix your issue, add the following CSS to your code:

x-layout > section {
  overflow: auto;
}

This will make just your content section scroll. I'm realizing this should be the default expected x-layout behavior, and will fix the CSS of x-layout accordingly. Thanks for filing!

potch commented 11 years ago

Actually, I just checked out the demo @sole posted, and x-layout is using overflow: auto as I described.

@dtk, what version of Chrome are you using? Do you have the "experimental web platform features" flag turned on?

potch commented 10 years ago

I totally asked the wrong person. @ghost, what version of Chrome are you using? Do you have the "experimental web platform features" flag turned on?

potch commented 10 years ago

this user apparently no longer exists. I'm not sure how to help them.

mozbrick / brick

x-layout not working? #79