Layout and Decks together don't seem to work. about brick

[cfjedimaster]

Also broken in iOS Safari.

[ldoubleuz]

Ugh, this is a known issue with Webkit's CSS flexbox. Basically, x-deck tries to fill height:100% of its parent container, but in Webkit, if the parent-container is a flex item, height:100% children just go to zero height. There is a workaround here for now where you can apply position:relative to the section and position:absolute to the deck, but I'll try to bake an actual fix for this into the next patch.

[ldoubleuz]

Fixed as of version 1.0.3beta

[cfjedimaster]

I just tested and I don't see it fixed. It definitely changed - but previously there was an empty space, now it is collapsed. Here it is in the release (1.0.2):

https://www.evernote.com/shard/s3/sh/e2ce457e-4674-47aa-98c3-2da23be8a9cc/3350e2c71270fae709daa2ef16fb1fcd

And here it is with the 1.0.3:

https://www.evernote.com/shard/s3/sh/a89b2206-085c-4b76-b95e-31da43aa270a/4ab9d2b68fda5239cb543a6830ec3415

[ldoubleuz]

Out of curiousity, does the parent container have a width/height applied? The x-layout defaults to 100% width/height of the parent, so it's up to the developer to provide the parent dimensions.

For example, this is what I see when I use the following structure:

<style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    body {
        background: #eee;
    }

    header, footer, h1, h3 {
        color: #fff;
        margin: 0 auto;
        background: -webkit-linear-gradient(top, #CD6623, #BD4A2D);
        background: -moz-linear-gradient(top, #CD6623, #BD4A2D);
        background: -ms-linear-gradient(top, #CD6623, #BD4A2D);
        background: linear-gradient(top, #CD6623, #BD4A2D);
    }
</style>
    <x-layout>
        <header>
            I'm the header!
        </header>
        <section>

            <x-deck id="mainDeck">
                <x-card>
                    0
                    <span>I'm the first card!</span>
                </x-card>
                <x-card >
                    1
                    These cards can contain any markup!<br>

                </x-card>
                <x-card>
                    2
                </x-card>
            </x-deck>
        </section>

        <footer>
            <button id="prevButton">Previous</button>
            <button id="nextButton">Next</button>
        </footer>

    </x-layout>

[cfjedimaster]

Confirmed that works. Question - how would you use this but still have it
be 100% high? In other words, I just want it to work. ;)

On Sun, Aug 18, 2013 at 9:08 PM, Leon Zhang [email protected]:

Out of curiousity, does the parent container have a width/height applied?
The x-layout defaults to 100% width/height of the parent, so it's up to the
developer to provide the parent dimensions.

For example, this is what I see when I use the following structure:

<style> html, body { height: 100%; margin: 0; padding: 0; } body { background: #eee; } header, footer, h1, h3 { color: #fff; margin: 0 auto; background: -webkit-linear-gradient(top, #CD6623, #BD4A2D); background: -moz-linear-gradient(top, #CD6623, #BD4A2D); background: -ms-linear-gradient(top, #CD6623, #BD4A2D); background: linear-gradient(top, #CD6623, #BD4A2D); } </style>

<x-layout>
    <header>
        I'm the header!
    </header>
    <section>

        <x-deck id="mainDeck">
            <x-card>
                0
                <span>I'm the first card!</span>
            </x-card>
            <x-card >
                1
                These cards can contain any markup!<br>

            </x-card>
            <x-card>
                2
            </x-card>
        </x-deck>
    </section>

    <footer>
        <button id="prevButton">Previous</button>
        <button id="nextButton">Next</button>
    </footer>

</x-layout>

[image: image]https://f.cloud.github.com/assets/1449660/983704/23196a02-0874-11e3-9673-ff2a854900f1.png

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/33#issuecomment-22847469
.

Raymond Camden, Adobe Developer Evangelist

Email : [email protected]
Blog : www.raymondcamden.com
Twitter: cfjedimaster

[sole]

@cfjedimaster did you set the parent to be height: 100% ? :-)

[cfjedimaster]

I did. When I do - it goes back to how it was (I mean after your fix, so
the header and footer are 'collapsed').

On Mon, Aug 19, 2013 at 9:38 AM, sole [email protected] wrote:

@cfjedimaster https://github.com/cfjedimaster did you set the parent to
be height: 100% ? :-)

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/33#issuecomment-22876537
.

Raymond Camden, Adobe Developer Evangelist

Email : [email protected]
Blog : www.raymondcamden.com
Twitter: cfjedimaster

[sole]

it'd to be @ldoubleuz 's fix. So let's just wait until he wakes up and answers, I'm not the expert on the subject. Just wanted to dive in just in case you had overlooked the parent height thing 😇

[ldoubleuz]

Hi Raymond, I'm not entirely clear on what you mean. What do you mean by expecting it to "just work"? What is the use case you're trying to apply? I could add a note to the site about needing parent dimensions, if that's what you mean.

Can you provide the source for your test case?

[cfjedimaster]

Sorry, what I meant was - in most cases I don't want to bother setting the
height because it could be used on different devices. Does that make sense?

On Mon, Aug 19, 2013 at 11:36 AM, Leon Zhang [email protected]:

Hi Raymond, I'm not entirely clear on what you mean. What do you mean by
expecting it to "just work"? What is the use case you're trying to apply? I
could add a note to the site about needing parent dimensions, if that's
what you mean.

Can you provide the source for your test case?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/33#issuecomment-22885276
.

Raymond Camden, Adobe Developer Evangelist

Email : [email protected]
Blog : www.raymondcamden.com
Twitter: cfjedimaster

[ldoubleuz]

Sure, but you don't have to set the height to be an explicit dimension. You could simply base it on percentages and still have it work on different browsers/devices. Can you describe how you are using this and/or provide the source for your use case so I can have a better understanding of how you are using this?

[cfjedimaster]

But when I tried 100% it went back to the layout issue it had before. Sorry
if I'm being dumb here - I feel like I'm repeating myself. ;) So here is
the code I'm using:

https://gist.github.com/cfjedimaster/6272044

And the result in Chrome:

https://www.evernote.com/shard/s3/sh/b352f8c9-755b-4802-b722-c2a064aad964/78a3f0ac4723573aaf941ce2cdd287bb

Note how the deck doesn't show up. Same thing in Firefox actually.

My intent is this: I want to use the layout such that the header is on top,
footer on bottom, no matter what screen size is accessing the content.

On Mon, Aug 19, 2013 at 12:19 PM, Leon Zhang [email protected]:

Sure, but you don't have to set the height to be an explicit dimension.
You could simply base it on percentages and still have it work on different
browsers. Can you describe how you are using this and/or provide the source
for your use case so I can have a better understanding of how you are using
this?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/33#issuecomment-22888402
.

Raymond Camden, Adobe Developer Evangelist

Email : [email protected]
Blog : www.raymondcamden.com
Twitter: cfjedimaster

[ldoubleuz]

Ah, I see the issue. You're applying the height: 100% to the x-layout, not its parent.

Height percentage inheritance still works the same as normal CSS would (ie: parents must have a height set for children percentages to work), so since the parent is the <body> element, you can get what you want just by adding the following style:

html, body{
    height: 100%;
}

[cfjedimaster]

Kick butt - sorry for not getting what you meant earlier. That worked
perfectly. Thank you.

On Mon, Aug 19, 2013 at 1:06 PM, Leon Zhang [email protected]:

Ah, I see the issue. You're applying the height: 100% to the x-layout,
not its parent.

Height percentage inheritance still works the same as normal CSS would
(ie: parents must have a height set for children percentages to work), so
since the parent is the element, you can get what you want just by
adding the following style:

html, body{
height: 100%;
}

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/33#issuecomment-22891838
.

Raymond Camden, Adobe Developer Evangelist

Email : [email protected]
Blog : www.raymondcamden.com
Twitter: cfjedimaster