How to control the indicator gap on an Apache Royale Jewel form?

Question

I have a simple form:

<j:Form id="myForm3" x="720 "y="120" height="100" width="300">
    <j:FormItem label="data24"> 
        <b:TextInput id="data24"/>
    </j:FormItem>
    <j:FormItem label="data25"> 
        <b:TextInput id="data25"/>
    </j:FormItem>
    <j:FormItem label="data26"> 
        <b:TextInput id="data26"/>
    </j:FormItem>
<j:Form />

I want to control the gap between the label and the text input box. I thought I could do it with CSS but I can't find the right combination. How do do control this gap?

Or is there a better way to do the form?

Answer 1

gap in FormItem is controlled trough the layout bead. By default In the following example (modeled like yours), I added a HorizontalLayout bead only to the first FormItem to show the difference with the rest:

<j:Form id="myForm3" x="720 "y="120" height="100" width="300">
    <j:FormItem label="data24">
        <j:beads>
            <j:HorizontalLayout gap="8"/>
        </j:beads> 
        <j:TextInput localId="data24"/>
    </j:FormItem>
    <j:FormItem label="data25"> 
        <j:TextInput localId="data25"/>
    </j:FormItem>
</j:Form>

I changed id for localId since html doesn't like duplicates, so better use always the later.

Note 1: default gap is in Jewel Theme

j|FormItem
    gap: 2
    itemsVerticalAlign: itemsCentered

Note 2: a gap = 2 means in default Jewel Theme, 2x3 = 6 pixels. The values are baked in CSS, and are multiples of 4. All the default numbers can be configured in Jewel Theme through SASS for more flexibility.

Answer 2

although the last response was ok. Here's code you'll need for your specific use case. You'll need to add a css rule to hide the "required" part. I did at form level, but it could be done at form item level too, but guess you want to remove in all the form:

<j:Form localId="myForm3" x="720 "y="120" height="100" width="300" 
        className="remove-required">
        <j:FormItem label="data24">
            <j:beads>
                <j:HorizontalLayout gap="0"/>
            </j:beads> 
            <j:TextInput localId="data24"/>
        </j:FormItem>
        <j:FormItem label="data25">
            <j:beads>
                <j:HorizontalLayout gap="0"/>
            </j:beads>
            <j:TextInput localId="data25"/>
        </j:FormItem>
    </j:Form>

    <fx:Style>
        .jewel.form.remove-required .jewel.label.required {
            display: none;
        }
    </fx:Style>