Gap manages the space between elements while margin will apply to the
space around every element. So margin:10px will add a 10 pixel space to
the left of the first element and after it, but also before and after the
second element, giving you a gap of 20 between the elements and an edge of
10. Maybe you don't want that - maybe you want 10 between as well.
What you could do is have a .firstElement style with margin-left:10 but no
margin-right. A .lastElement with a margin-right of 10 but no margin left.
Then a .middleElement with both left- and right-margin set. Apply these
CSS style classes to the proper elements and you'll get the right look.
Maybe some of the layouts should apply class selectors instead of just
setting style properties.
‹peter
On 3/30/18, 1:25 PM, "carlos.rov...@gmail.com on behalf of Carlos Rovira"
<carlos.rov...@gmail.com on behalf of carlosrov...@apache.org> wrote:
>Hi Alex,
>
>this last is not about the gap. In this thread I covered various things
>and
>maybe I should make one thread each, but I though it could be many threads
>as well:
>
>1.- Problem to set properties through CSS for beads (layouts or even
>views). I think this can be covered with Peter's emails using
>ValuesManager. I should try it as
>
>2.- Problem that is maybe the most important. How to make a concrete
>component have different beads depending on where its used. (i.e:
>TitleBar,
>TitleBar in Panel and TitleBar in Alert). We need to have some kind of
>"cascade styles" for "fake" beads css declarations. Since a normal use can
>have a very different configuration than a use as a part of another
>component.
>
>3.- In my last email a mention a way to deal with 2), but as part of code.
>It's not ideal since you could need to write a class only to change a
>bead.
>My question there's if I must remove the previous bead in some way to
>avoid
>leaks.
>
>regarding your comment about gap and margins (referred to 1)), in fact in
>horizontal layout with gap and padding Peter uses margins to manage the
>gap, so in the end we are using that, but we should decide if we can use
>ValuesManager to capture whatever non standard property to proxy it
>through
>a bead. I think that would be great.
>
>So both problems are covered here and are valid for all kinds of beads
>(layout, view,...)
>
>thanks
>
>
>
>
>2018-03-30 18:57 GMT+02:00 Alex Harui <aha...@adobe.com.invalid>:
>
>> Carlos, are you looking for a general solution or is this specifically
>> about gap?
>>
>> Gap is not a CSS style. Flex introduced it. I believe the CSS
>>equivalent
>> is to set margins on all children of a container. Why not just use
>> margins?
>>
>> Thoughts?
>> -Alex
>>
>> On 3/30/18, 9:51 AM, "carlos.rov...@gmail.com on behalf of Carlos
>>Rovira"
>> <carlos.rov...@gmail.com on behalf of carlosrov...@apache.org> wrote:
>>
>> >If I use a ViewBead to solve this, and make this:
>> >
>> >titleBar = new TitleBar();
>> > titleBar.addBead(new HorizontalLayoutSpaceBetween());
>> >
>> >although this works ok, maybe it's not the best since there's another
>> >ILayoutBead left with no use.
>> >Should I make a removeBead of the one already was assigned by CSS?
>> >If yes, how I can remove it? (some sample code will be appreciate)
>> >
>> >thanks
>> >
>> >
>> >2018-03-30 14:57 GMT+02:00 Carlos Rovira <carlosrov...@apache.org>:
>> >
>> >> Hi Piotr,
>> >>
>> >> is not the real class ;), just want to write a quick example, change
>> >>that
>> >> for a real layout class (whatever)
>> >>
>> >> 2018-03-30 13:36 GMT+02:00 Piotr Zarzycki
>><piotrzarzyck...@gmail.com>:
>> >>
>> >>> Hi Carlos,
>> >>>
>> >>> But " verticallayout" - This is AS class ?
>> >>>
>> >>>
>> >>>
>> >>> 2018-03-30 13:19 GMT+02:00 Carlos Rovira <carlosrov...@apache.org>:
>> >>>
>> >>> > Another problem I found with layouts usability:
>> >>> >
>> >>> > If I have a component that uses by default an horizontal layout:
>> >>> >
>> >>> > ControlBar
>> >>> > {
>> >>> > IBeadLayout: Classreference ("horizontallayout");
>> >>> > }
>> >>> >
>> >>> > But this component is used in other component that wants to use
>> >>>another
>> >>> > layout (i.e vertical)
>> >>> >
>> >>> > I tried this:
>> >>> >
>> >>> > .alert j|ControlBar
>> >>> > {
>> >>> > IBeadLayout: Classreference ("verticallayout");
>> >>> > }
>> >>> >
>> >>> > and this:
>> >>> >
>> >>> > j|Alert j|ControlBar
>> >>> > {
>> >>> > IBeadLayout: Classreference ("verticallayout");
>> >>> > }
>> >>> >
>> >>> > but both options are not valid
>> >>> >
>> >>> > Some other way to do this? or this is not possible?
>> >>> >
>> >>> >
>> >>> > 2018-03-30 12:42 GMT+02:00 Carlos Rovira
>><carlosrov...@apache.org>:
>> >>> >
>> >>> > > Hi
>> >>> > >
>> >>> > > I'm finding a usability problem with layouts. Since Layouts use
>>to
>> >>>be
>> >>> > > configured via CSS (IBeadLayout), this works ok for basic
>>layouts
>> >>> without
>> >>> > > properties, but if you have for example a "gap" property like in
>> >>> > > HorizontalLayoutWithPaddingAndGap, this layout is not usable vía
>> >>>CSS
>> >>> > > since you can't set the "gap" attribute.
>> >>> > >
>> >>> > > So how can we overcome this issue?
>> >>> > >
>> >>> > > Maybe If we could write:
>> >>> > >
>> >>> > > SomeComponent
>> >>> > > {
>> >>> > > IBeadLayout: Classreference ("some.layout.with.properties.
>> >>> > > that.need.to.be.set");
>> >>> > > gap: 10px;
>> >>> > > }
>> >>> > >
>> >>> > > And gap will be read by the layout...
>> >>> > >
>> >>> > > if not any layout with properties will be limited to use via
>>MXML
>> >>> > >
>> >>> > > Maybe I missing some other way to do this?
>> >>> > >
>> >>> > > --
>> >>> > > Carlos Rovira
>> >>> > >
>> >>>https://na01.safelinks.protection.outlook.com/?url=
>> http%3A%2F%2Fabout.me
>> >>>%2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%
>> 7C30e8d54e57f54bacdfa4
>> >>>08d5965e80b2%7Cfa7b1b5a7b34438794aed2c178de
>> cee1%7C0%7C0%7C63658025499754
>> >>>2448&sdata=tTkfzUIHWdklaYJeEM3MqTYeiU3hkv4SPRTHDOp1jTQ%3D&reserved=0
>> >>> > >
>> >>> > >
>> >>> >
>> >>> >
>> >>> > --
>> >>> > Carlos Rovira
>> >>> >
>> >>>https://na01.safelinks.protection.outlook.com/?url=
>> http%3A%2F%2Fabout.me
>> >>>%2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%
>> 7C30e8d54e57f54bacdfa4
>> >>>08d5965e80b2%7Cfa7b1b5a7b34438794aed2c178de
>> cee1%7C0%7C0%7C63658025499754
>> >>>2448&sdata=tTkfzUIHWdklaYJeEM3MqTYeiU3hkv4SPRTHDOp1jTQ%3D&reserved=0
>> >>> >
>> >>>
>> >>>
>> >>>
>> >>> --
>> >>>
>> >>> Piotr Zarzycki
>> >>>
>> >>> Patreon:
>> >>>*https://na01.safelinks.protection.outlook.com/?url=
>> https%3A%2F%2Fwww.pa
>> >>>treon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com
>> %7C30e8d54e57
>> >>>f54bacdfa408d5965e80b2%7Cfa7b1b5a7b34438794aed2c178de
>> cee1%7C0%7C0%7C6365
>> >>>80254997542448&sdata=M28nPMMFQUG3whBAJwbqIaRwpNUBl6
>> TkIqRPvBcx2Hs%3D&rese
>> >>>rved=0
>> >>>
>> >>><https://na01.safelinks.protection.outlook.com/?url=
>> https%3A%2F%2Fwww.pa
>> >>>treon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com
>> %7C30e8d54e57
>> >>>f54bacdfa408d5965e80b2%7Cfa7b1b5a7b34438794aed2c178de
>> cee1%7C0%7C0%7C6365
>> >>>80254997542448&sdata=M28nPMMFQUG3whBAJwbqIaRwpNUBl6
>> TkIqRPvBcx2Hs%3D&rese
>> >>>rved=0>*
>> >>>
>> >>
>> >>
>> >>
>> >> --
>> >> Carlos Rovira
>> >>
>> >>https://na01.safelinks.protection.outlook.com/?url=
>> http%3A%2F%2Fabout.me%
>> >>2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%
>> 7C30e8d54e57f54bacdfa408
>> >>d5965e80b2%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
>> 7C63658025499754244
>> >>8&sdata=tTkfzUIHWdklaYJeEM3MqTYeiU3hkv4SPRTHDOp1jTQ%3D&reserved=0
>> >>
>> >>
>> >
>> >
>> >--
>> >Carlos Rovira
>> >https://na01.safelinks.protection.outlook.com/?url=
>> http%3A%2F%2Fabout.me%2
>> >Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%
>> 7C30e8d54e57f54bacdfa408d5
>> >965e80b2%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
>> 7C636580254997542448&s
>> >data=tTkfzUIHWdklaYJeEM3MqTYeiU3hkv4SPRTHDOp1jTQ%3D&reserved=0
>>
>>
>
>
>--
>Carlos Rovira
>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2
>Fcarlosrovira&data=02%7C01%7Cpent%40adobe.com%7Caa1936c6f2524c09bf0e08d596
>6360d0%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636580275919485587&sda
>ta=LZQ%2FLol99Bzc82RfYoOly19vxyH4GlEgv%2FzzK%2BrcZ5E%3D&reserved=0
