You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@royale.apache.org by Olaf Krueger <ma...@olafkrueger.net> on 2018/01/05 21:09:28 UTC
How to achieve Horizontal/Vertical alignment?
Hi,
because I didn't find some beads to center items in a layout, I am currently
using [1] in combination with js:HorizontalFlexLayout/js:VerticalFlexLayout
which works for me.
I guess those layout alignment should be provided by some beads, do I miss
something or isn't something like this not implemented yet... or am I on the
wrong track?
Thanks,
Olaf
[1]
.mainView {
align-items: center;
justify-content: center;
}
--
Sent from: http://apache-royale-development.20373.n8.nabble.com/
Re: How to achieve Horizontal/Vertical alignment?
Posted by Alex Harui <ah...@adobe.com.INVALID>.
Yeah, we'll see what patterns folks want to use. I'm not convinced you
can write an Alignment bead that will know what to do in all situations.
I think we're going to end up with custom scenario-oriented containers:
ContainerThatCentersChildren, TileContainerThatCentersChildren,
ThreePaneContainer, etc.
Of course, I could be wrong...
-Alex
On 1/6/18, 11:54 AM, "Olaf Krueger" <ma...@olafkrueger.net> wrote:
>Hi Alex,
>
>>It may be a bead, or you might just subclass HorizontalFlexLayout, call
>>it
>HorizontalFlexLayoutThatCentersChildren...
>
>Even if this 'Express' style seems to be comfortable during development I
>am
>not sure if those verbose named beads are the best option.
>I fear that there will be a confusing number of those beads someday whose
>provide different combinations of features/things.
>
>I am not sure if something like this would be easier to understand and
>easier to handle at the end:
>
><js:Group>
> <js:beads>
> <js:FlexLayout>
> <js:Vertical>
> <js:Alignment value="center">
> </js:beads>
><js:/Groups>
>
>However, I first have to get more experienced with this stuff in order to
>form an opinion.
>I keep this in mind... ;-)
>
>Thanks,
>Olaf
>
>
>
>--
>Sent from:
>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fapache-roy
>ale-development.20373.n8.nabble.com%2F&data=02%7C01%7Caharui%40adobe.com%7
>C563e03e2929743b0e73508d5553f53e4%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7
>C0%7C636508652866559760&sdata=ypZBDr40YeGAdnbQAdj88stIR9d%2B6AYEVw8TWQFQxs
>4%3D&reserved=0
Re: How to achieve Horizontal/Vertical alignment?
Posted by Olaf Krueger <ma...@olafkrueger.net>.
Hi Alex,
>It may be a bead, or you might just subclass HorizontalFlexLayout, call it
HorizontalFlexLayoutThatCentersChildren...
Even if this 'Express' style seems to be comfortable during development I am
not sure if those verbose named beads are the best option.
I fear that there will be a confusing number of those beads someday whose
provide different combinations of features/things.
I am not sure if something like this would be easier to understand and
easier to handle at the end:
<js:Group>
<js:beads>
<js:FlexLayout>
<js:Vertical>
<js:Alignment value="center">
</js:beads>
<js:/Groups>
However, I first have to get more experienced with this stuff in order to
form an opinion.
I keep this in mind... ;-)
Thanks,
Olaf
--
Sent from: http://apache-royale-development.20373.n8.nabble.com/
Re: How to achieve Horizontal/Vertical alignment?
Posted by Alex Harui <ah...@adobe.com.INVALID>.
AIUI, centering is tricky in the browser. The way you get centered
depends on the kind of element and the parent's layout. I don't think we
have a great solution for this yet. I'm sort of waiting to see how people
solve it to see if we see a pattern and can encapsulate it.
It may be a bead, or you might just subclass HorizontalFlexLayout, call it
HorizontalFlexLayoutThatCentersChildren and have it add a CSS className to
the container in order to apply the associated CSS which you could put in
defaults.css
Of course, I could be wrong...
-Alex
On 1/5/18, 1:09 PM, "Olaf Krueger" <ma...@olafkrueger.net> wrote:
>Hi,
>because I didn't find some beads to center items in a layout, I am
>currently
>using [1] in combination with
>js:HorizontalFlexLayout/js:VerticalFlexLayout
>which works for me.
>
>I guess those layout alignment should be provided by some beads, do I miss
>something or isn't something like this not implemented yet... or am I on
>the
>wrong track?
>
>Thanks,
>Olaf
>
>[1]
>.mainView {
> align-items: center;
> justify-content: center;
>}
>
>
>
>--
>Sent from:
>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fapache-roy
>ale-development.20373.n8.nabble.com%2F&data=02%7C01%7Caharui%40adobe.com%7
>Cecab0cf074e3422bc46308d554809dcd%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7
>C0%7C636507833822944463&sdata=x2igZ6uI7j7MacLu%2B5gl8Sar%2BRcSnh%2FV3rr5wy
>t%2FnSc%3D&reserved=0