RE: [EXTERNAL] Re: How do I control where a FORM lays out in a Jewel Group

["Koch (US), Warren R" <wa...@boeing.com>]

The CSS change had the effect of making the Lable into one character wide.  In fact if the actual width is bigger than the CSS width then it just wraps it up into a mess.

I stayed away from the Vgroup/Hgroup combination because I wanted to stick with the traditional form layout.  I guess I'll have to try an HGroup with 2 VGroups in it and just force heights so they align.  Ugly but I guess workable.

From: Carlos Rovira [mailto:carlosrovira@apache.org]
Sent: Tuesday, September 22, 2020 12:38 PM
To: users@royale.apache.org
Subject: [EXTERNAL] Re: How do I control where a FORM lays out in a Jewel Group


This message was sent from outside of Boeing. Please do not click links or open attachments unless you recognize the sender and know that the content is safe.




Hi,

the actual Form and FormItem need to be changed since the default is an horizontal layout with a label and then the controls. The label is aligned to right and there's a default width of 200px. So it's ok for that layout, but we need to change since is very strange for people like you coming and expecting a traditional layout

A solution is to override actual CSS:

.jewel.formitem .jewel.label.formlabel {
     width: 0px;
}

Another approach for you at this point (before we refactor the FormItem) could be the following:
Change the FormItem for HGroup (or VGroup if you prefer vertical layout) and add a label and then the controls you need.

<j:initialView>
        <j:View>
            <j:Group>
                <j:Form>
                    <j:beads>
                        <j:FormLayout gap="2"/>
                    </j:beads>
                    <j:HGroup>
                        <j:Label text="xxx"/>
                        <j:TextInput width="400"/>
                    </j:HGroup>
                </j:Form>
            </j:Group>
        </j:View>
    </j:initialView>


sorry for the actual headaches with FormItem

Carlos



El mar., 22 sept. 2020 a las 17:53, wkoch (<wa...@boeing.com>>) escribió:
I know I'm missing something obvious but I can't figure it out.  I have a
simple form in a simple Jewel Group.

<j:initialView>
<b:View x="10" y="5">
<j:Group>
 <j:Form localId="LeftForm" x="0" y="30" className="remove-required">
  <j:beads>
   <j:FormLayout gap="2" />
  </j:beads>
  <j:FormItem label="xxx" height="22" >
   <j:beads>
    <j:HorizontalLayout gap="0"/>
   </j:beads>
   <local:TextInputPlus localId="Search_1" width="400"/>
  </j:FormItem>
 </j:Form>
</j:Group>
</b:View>
</j:initialView>

I expected the X position of the Form to be against the left side of the
view but it never is.  If I do an x="-100" it gets close.  I'm sure I'm
missing a bead or a CSS style but I simply can't find it.



--
Sent from: http://apache-royale-users.20374.n8.nabble.com/


--
Carlos Rovira
http://about.me/carlosrovira