IIRC, there are some tricky calculations when both top and bottom margin are in effect. I don't think you get 20px. The layout code itself can set margin-top to 0 on the first element and margin-bottom to 0 on the last element.
Of course, I could be wrong... -Alex On 3/30/18, 10:40 AM, "Peter Ent" <[email protected]> wrote: >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, "[email protected] on behalf of Carlos Rovira" ><[email protected] on behalf of [email protected]> 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 <[email protected]>: >> >>> 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, "[email protected] on behalf of Carlos >>>Rovira" >>> <[email protected] on behalf of [email protected]> 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 <[email protected]>: >>> > >>> >> 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 >>><[email protected]>: >>> >> >>> >>> Hi Carlos, >>> >>> >>> >>> But " verticallayout" - This is AS class ? >>> >>> >>> >>> >>> >>> >>> >>> 2018-03-30 13:19 GMT+02:00 Carlos Rovira <[email protected]>: >>> >>> >>> >>> > 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 >>><[email protected]>: >>> >>> > >>> >>> > > 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%7Caa1936c6f2524c09bf0e08d59 >>6 >>6360d0%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636580275919485587&sd >>a >>ta=LZQ%2FLol99Bzc82RfYoOly19vxyH4GlEgv%2FzzK%2BrcZ5E%3D&reserved=0 >
